关于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 相关文章推荐
用javascript动态调整iframe高度的代码
Apr 10 Javascript
JS面向对象、prototype、call()、apply()
May 14 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
Apr 24 Javascript
调用HttpHanlder的几种返回方式小结
Dec 20 Javascript
一个Action如何调用两个不同的方法
May 22 Javascript
Vue二次封装axios为插件使用详解
May 21 Javascript
vue2.0 实现导航守卫(路由守卫)
May 21 Javascript
vue中接口域名配置为全局变量的实现方法
Sep 20 Javascript
vscode 开发Vue项目的方法步骤
Nov 25 Javascript
详解小程序如何改变onLoad的执行时机
Nov 01 Javascript
JavaScript变量基本使用方法实例分析
Nov 15 Javascript
vue+Element-ui实现登录注册表单
Nov 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
php实现用于计算执行时间的类实例
2015/04/18 PHP
教大家制作简单的php日历
2015/11/17 PHP
php中错误处理操作实例分析
2019/08/23 PHP
js加解密 脚本解密
2008/02/22 Javascript
对xmlHttp对象的理解
2011/01/17 Javascript
jquery实现可旋转可拖拽的文字效果代码
2016/01/27 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
2016/05/10 Javascript
jQuery新窗口打开外链接
2016/07/21 Javascript
如何使用jquery实现文字上下滚动效果
2016/10/12 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
2018/11/19 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
2019/04/26 Javascript
JavaScript计算出两个数的差值
2020/03/19 Javascript
vue+高德地图实现地图搜索及点击定位操作
2020/09/09 Javascript
[44:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第二局
2016/03/03 DOTA
[02:42]完美大师赛主赛事淘汰赛第三日观众采访
2017/11/25 DOTA
Python模块学习 filecmp 文件比较
2012/08/27 Python
python递归删除指定目录及其所有内容的方法
2017/01/13 Python
浅谈终端直接执行py文件,不需要python命令
2017/01/23 Python
Windows上使用Python增加或删除权限的方法
2018/04/24 Python
用xpath获取指定标签下的所有text的实例
2019/01/02 Python
Python创建字典的八种方式
2019/02/27 Python
Python协程操作之gevent(yield阻塞,greenlet),协程实现多任务(有规律的交替协作执行)用法详解
2019/10/14 Python
Python函数参数分类原理详解
2020/05/28 Python
Python学习之路之pycharm的第一个项目搭建过程
2020/06/18 Python
详解pycharm的python包opencv(cv2)无代码提示问题的解决
2021/01/29 Python
实习生自我鉴定
2013/12/12 职场文书
英语专业学生个人求职信
2014/01/28 职场文书
老公保证书范文
2014/04/29 职场文书
整顿机关作风心得体会
2014/09/10 职场文书
十佳少先队员演讲稿
2014/09/12 职场文书
2014年度个人工作总结范文
2015/03/09 职场文书
升学宴学生致辞
2015/09/29 职场文书
2016年圣诞节义工活动总结
2016/04/01 职场文书
MongoDB使用profile分析慢查询的步骤
2021/04/30 MongoDB
JavaScript 原型与原型链详情
2021/11/02 Javascript