关于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 相关文章推荐
DOM精简教程
Oct 03 Javascript
ajaxControlToolkit AutoCompleteExtender的用法
Oct 30 Javascript
实现超用户体验 table排序javascript实现代码
Jun 22 Javascript
如何编写高质量JS代码(续)
Feb 25 Javascript
JQuery调用绑定click事件的3种写法
Mar 28 Javascript
多个js毫秒倒计时同时进行效果
Jan 05 Javascript
JavaScript函数节流概念与用法实例详解
Jun 20 Javascript
Express URL跳转(重定向)的实现方法
Apr 07 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
Aug 22 Javascript
使用nvm和nrm优化node.js工作流的方法
Jan 17 Javascript
Vue Echarts实现可视化世界地图代码实例
May 07 Javascript
javascript系统时间设置操作示例
Jun 17 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
Win下如何安装PHP的APC拓展
2013/08/07 PHP
php多功能图片处理类分享(php图片缩放类)
2014/03/14 PHP
php数组索引的Key加引号和不加引号的区别
2014/08/19 PHP
thinkphp特殊标签用法概述
2014/11/24 PHP
thinkphp自定义权限管理之名称判断方法
2017/04/01 PHP
详解php curl带有csrf-token验证模拟提交方法
2018/04/18 PHP
PHP从零开始打造自己的MVC框架之路由类实现方法分析
2019/06/03 PHP
php中的钩子理解及应用实例分析
2019/08/30 PHP
JavaScript中Object和Function的关系小结
2009/09/26 Javascript
6个DIV 135或246间隔一秒轮番显示效果
2010/07/24 Javascript
Node.js文件操作详解
2014/08/16 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
2016/01/26 Javascript
详解angularJs中自定义directive的数据交互
2017/01/13 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
2017/03/04 Javascript
JS设计模式之策略模式概念与用法分析
2018/02/05 Javascript
vue 自定义指令自动获取文本框焦点的方法
2018/08/25 Javascript
laypage+SpringMVC实现后端分页
2019/07/27 Javascript
JS中的算法与数据结构之集合(Set)实例详解
2019/08/20 Javascript
通过实例了解JS 连续赋值
2019/09/24 Javascript
小程序实现tab标签页
2020/11/16 Javascript
[47:10]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第二场 12.16
2020/12/18 DOTA
Python使用微信SDK实现的微信支付功能示例
2017/06/30 Python
Python 字符串转换为整形和浮点类型的方法
2018/07/17 Python
对python条件表达式的四种实现方法小结
2019/01/30 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
HTML5响应式(自适应)网页设计的实现
2017/11/17 HTML / CSS
Ajax主要包含了哪些技术
2014/06/12 面试题
毕业生自荐书模版
2014/01/04 职场文书
双十佳事迹材料
2014/01/29 职场文书
考试违纪检讨书
2014/02/02 职场文书
ktv筹备计划书
2014/05/03 职场文书
党支部创先争优活动总结
2014/08/28 职场文书
暑假安全保证书
2015/02/28 职场文书
新郎接新娘保证书
2015/05/08 职场文书
《卧薪尝胆》读后感3篇
2019/12/26 职场文书
利用Python实现模拟登录知乎
2022/05/25 Python