关于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 相关文章推荐
Input 特殊事件onpopertychange和oninput
Jun 17 Javascript
jquery模拟按下回车实现代码
Sep 20 Javascript
可自己添加html的伪弹出框实现代码
Sep 08 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
Nov 11 Javascript
JavaScript Split()方法
Dec 18 Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 Javascript
jQuery中Find选择器用法示例
Sep 21 Javascript
详解Vue-cli代理解决跨域问题
Sep 27 Javascript
解决一个微信号同时支持多个环境网页授权问题
Aug 07 Javascript
vue使用codemirror的两种用法
Aug 27 Javascript
Openlayers实现图形绘制
Sep 28 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代码
2008/09/10 PHP
PHP iconv 解决utf-8和gb2312编码转换问题
2010/04/12 PHP
php中使用explode查找某个字符是否存在的方法
2011/07/12 PHP
php内嵌函数用法实例
2015/03/20 PHP
php遍历类中包含的所有元素的方法
2015/05/12 PHP
服务器迁移php版本不同可能诱发的问题
2015/12/22 PHP
PHP中如何判断exec函数执行成功?
2016/08/04 PHP
php获取'/'传参的值简单方法
2017/07/13 PHP
在 Laravel 项目中使用 webpack-encore的方法
2019/07/21 PHP
javascript 命名规则 变量命名规则
2010/02/25 Javascript
jquery控制表单输入框显示默认值的方法
2015/05/22 Javascript
JavaScript中的冒泡排序法
2016/08/03 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
2017/10/19 Javascript
Node.js创建Web、TCP服务器
2017/12/05 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
Vue实现开心消消乐游戏算法
2019/10/22 Javascript
vue 中url 链接左边的小图标更改问题
2019/12/30 Javascript
原生js无缝轮播插件使用详解
2020/03/09 Javascript
在Docker上开始部署Python应用的教程
2015/04/17 Python
通过Python 获取Android设备信息的轻量级框架
2017/12/18 Python
Django 拼接两个queryset 或是两个不可以相加的对象实例
2020/03/28 Python
Python实现初始化不同的变量类型为空值
2020/06/02 Python
pycharm 实现复制一行的快捷键
2021/01/15 Python
CSS3+Sprite实现僵尸行走动画特效源码
2016/01/27 HTML / CSS
简单几步用纯CSS3实现3D翻转效果
2019/01/17 HTML / CSS
Unix如何在一行中运行多个命令
2015/05/29 面试题
2013年保送生自荐信格式
2013/11/20 职场文书
保洁主管岗位职责
2013/11/20 职场文书
学习雷锋精神心得体会范文
2014/03/12 职场文书
应聘编辑自荐信范文
2014/03/12 职场文书
银行委托书范本
2014/04/04 职场文书
团委书记的竞聘演讲稿
2014/04/24 职场文书
2014幼儿园教师个人工作总结
2014/11/08 职场文书
少先队工作总结2015
2015/05/13 职场文书
商务宴会祝酒词
2015/08/11 职场文书