关于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 Function类型
Dec 04 Javascript
JavaScript获取DOM元素的11种方法总结
Apr 25 Javascript
TypeError document.getElementById(...) is null错误原因
May 18 Javascript
学习JavaScript设计模式之代理模式
Jan 12 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
Feb 19 Javascript
JavaScript中0和""比较引发的问题
May 26 Javascript
AngularJS 服务详细讲解及示例代码
Aug 17 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
js限制input只能输入有效的数字(第一个不能是小数点)
Sep 28 Javascript
create-react-app中添加less支持的实现
Nov 15 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
Mar 04 Javascript
vant 解决tab切换插件标题样式自定义的问题
Nov 13 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
15种PHP Encoder的比较
2007/03/06 PHP
thinkphp模板输出技巧汇总
2014/11/24 PHP
PHP中的traits实现代码复用使用实例
2015/05/13 PHP
php版银联支付接口开发简明教程
2016/10/14 PHP
利用PHP扩展Xhprof分析项目性能实践教程
2018/09/05 PHP
浅谈Jquery为元素绑定事件
2015/04/27 Javascript
JavaScript调用客户端Java程序的方法
2015/07/27 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
2015/12/08 Javascript
javascript如何写热点图
2015/12/08 Javascript
一个炫酷的Bootstrap导航菜单
2016/12/28 Javascript
两种简单的跨域方法(jsonp、php)
2017/01/02 Javascript
微信小程序canvas写字板效果及实例
2017/06/15 Javascript
p5.js入门教程之鼠标交互的示例
2018/03/16 Javascript
使用react render props实现倒计时的示例代码
2018/12/06 Javascript
vue双向绑定及观察者模式详解
2019/03/19 Javascript
vue使用swiper实现中间大两边小的轮播图效果
2019/11/24 Javascript
vue路由切换时取消之前的所有请求操作
2020/09/01 Javascript
python实现读取excel写入mysql的小工具详解
2017/11/20 Python
django1.11.1 models 数据库同步方法
2018/05/30 Python
python中 * 的用法详解
2019/07/10 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
Python 串口通信的实现
2020/09/29 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
CSS3+js实现简单的时钟特效
2015/03/18 HTML / CSS
如何查看浏览器对html5的支持情况
2020/12/15 HTML / CSS
迪士尼英国官方商店:shopDisney UK
2019/09/21 全球购物
中专生自我鉴定范文
2014/02/02 职场文书
《自然之道》教学反思
2014/02/11 职场文书
学生安全责任书
2014/04/15 职场文书
2014年乡镇领导个人整改措施
2014/09/19 职场文书
机关党总支领导班子整改方案
2014/09/20 职场文书
2014年派出所工作总结
2014/11/21 职场文书
抢劫罪辩护词
2015/05/21 职场文书
安全教育观后感
2015/06/17 职场文书
2019最新企业员工考勤管理制度(通用版)!
2019/07/02 职场文书
浅谈vue2的$refs在vue3组合式API中的替代方法
2021/04/18 Vue.js