关于JavaScript的with 语句的使用方法


Posted in Javascript onMay 09, 2011

用过 Java 和 .NET 的同学对包或命名空间的概念应该不会陌生, 正因为有这个概念, 使代码的简洁易读得到了保证. 不知 JavaScript 设计之初是如何定位 with 语句的, 个人觉得它们之间有一定的相似度. 如:

apple.banana.candy.dog.egg.fog.god.huh.index = 0; 
doSomething(apple.banana.candy.dog.egg.fog.god.huh.index);

利用 with 语句, 可以写为以下代码.
with(apple.banana.candy.dog.egg.fog.god.huh) { 
c = 0; 
doSomething(index); 
}

看起来很美妙, 却存在致命的缺陷. 下面我们来进行一些小测试吧.

1. 在 with 语句内部通过内部变量修改数值

var root = { 
branch: { 
node: 1 
} 
}; with(root.branch) { 
node = 0; 
// 显示 0, 正确! 
alert(node); 
} 
// 显示 0, 正确! 
alert(root.branch.node);

2. 在 with 语句内部通过对象节点修改数值
var root = { 
branch: { 
node: 1 
} 
}; with(root.branch) { 
root.branch.node = 0; 
// 显示 0, 正确! 
alert(node); 
} 
// 显示 0, 正确! 
alert(root.branch.node);

经过测试 1 和测试 2, 乍看没什么问题, 但是... 请看测试 3.

3. 在 with 语句内部通过对象父节点修改数值

var root = { 
branch: { 
node: 1 
} 
}; with(root.branch) { 
root.branch = { 
node: 0 
}; 
// 显示 1, 错误! 
alert(node); 
} 
// 显示 0, 正确! 
alert(root.branch.node);

由上面的测试 3 可知, with 语句内部的节点父节点修改后, 不会同步到节点本身. 也就是说, 不能保证内外数值的一致性. 这是可能成为项目里面隐藏性很高的 bug.
那我们该怎么办呢? 接受那很长的一串逐级访问, 还是另有他法?

方法是有的. 我们可以通过别名引用父节点的方式来调用节点对象, 如:

var root = { 
branch: { 
node: 1 
} 
}; var quote = root.branch; 
quote.node = 0; 
// 显示 0, 正确! 
alert(root.branch.node);

我相信很少人会用 with 语句, 也不会有很多人知道这个关键字, 但我觉得这是个有问题的语句, 压根就不应该使用, 所以写个小文记录一下.
Javascript 相关文章推荐
js下写一个事件队列操作函数
Jul 19 Javascript
Jquery实现简单的轮播效果(代码管用)
Mar 14 Javascript
jQuery根据表单name获取值的方法
May 24 Javascript
Vue.js学习之过滤器详解
Jan 22 Javascript
Map.vue基于百度地图组件重构笔记分享
Apr 17 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
Dec 20 Javascript
Angular 5.x 学习笔记之Router(路由)应用
Apr 08 Javascript
利用Node.js批量抓取高清妹子图片实例教程
Aug 02 Javascript
node获取客户端ip功能简单示例
Aug 24 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
Jun 04 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
Jul 17 Javascript
使用Vant完成通知栏Notify的提示操作
Nov 11 Javascript
JavaScript的parseInt 取整使用
May 09 #Javascript
实现变速回到顶部的JavaScript代码
May 09 #Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
May 09 #Javascript
Chrome Form多次提交表单问题的解决方法
May 09 #Javascript
JQuery将文本转化成JSON对象需要注意的问题
May 09 #Javascript
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
May 07 #Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
May 07 #Javascript
You might like
一个简单实现多条件查询的例子
2006/10/09 PHP
php session_start()关于Cannot send session cache limiter - headers already sent错误解决方法
2009/11/27 PHP
关于PHP结束标签的使用细节探讨及联想
2013/03/04 PHP
php中的观察者模式简单实例
2015/01/20 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
js 自定义的联动下拉框
2010/02/07 Javascript
预加载css或javascript的js代码
2010/04/23 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
2013/11/08 Javascript
Js与下拉列表处理问题解决
2014/02/13 Javascript
无刷新预览所选择的图片示例代码
2014/04/02 Javascript
javascript对中文按照拼音排序代码
2014/08/20 Javascript
js获取微信版本号的方法
2015/05/12 Javascript
网页收藏夹显示ICO图标(代码少)
2015/08/04 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
2015/10/16 Javascript
JavaScript代码里的判断小结
2016/08/22 Javascript
EasyUI折叠表格层次显示detailview详解及实例
2016/12/28 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
2017/05/10 Javascript
使用localStorage替代cookie做本地存储
2019/09/25 Javascript
JavaScript实现京东放大镜效果
2019/12/03 Javascript
Python3.5局部变量与全局变量作用域实例分析
2019/04/30 Python
python的命名规则知识点总结
2019/10/04 Python
pygame实现五子棋游戏
2019/10/29 Python
对tensorflow 中tile函数的使用详解
2020/02/07 Python
Python 高效编程技巧分享
2020/09/10 Python
pycharm 使用tab跳出正在编辑的括号(){}{}等问题
2021/02/26 Python
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
美国滑板店:Tactics
2020/11/08 全球购物
党员公开承诺书
2014/03/25 职场文书
企业新年寄语
2014/04/04 职场文书
2015年劳动部工作总结
2015/05/23 职场文书
幼儿园小班开学寄语
2015/05/27 职场文书
2016年度师德标兵先进事迹材料
2016/02/26 职场文书
求职信:求职应该注意的问题
2019/04/24 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书
Python下载商品数据并连接数据库且保存数据
2022/03/31 Python