关于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 相关文章推荐
学习jquery之一
Apr 27 Javascript
JavaScript中的Document文档对象
Jan 16 Javascript
function foo的原型与prototype属性解惑
Nov 19 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
Aug 12 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
Dec 23 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
Sep 13 Javascript
Angularjs全局变量被作用域监听的正确姿势
Feb 06 Javascript
jQuery Ajax实现跨域请求
Jan 21 Javascript
浅谈微信页面入口文件被缓存解决方案
Sep 29 Javascript
JS使用Dijkstra算法求解最短路径
Jan 17 Javascript
ES6入门教程之Array.from()方法
Mar 23 Javascript
Vue实现仿iPhone悬浮球的示例代码
Mar 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
php对二维数组按指定键值key排序示例代码
2013/11/26 PHP
php中strstr、strrchr、substr、stristr四个函数的区别总结
2014/09/22 PHP
PHP查询快递信息的方法
2015/03/07 PHP
Yii使用技巧大汇总
2015/12/29 PHP
Laravel下生成验证码的类
2017/11/15 PHP
理解Javascript_01_理解内存分配原理分析
2010/10/11 Javascript
JavaScript中遍历对象的property的3种方法介绍
2014/12/30 Javascript
js实现jquery的offset()方法实例
2015/01/10 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
2015/03/04 Javascript
浅谈angularJS 作用域
2015/07/05 Javascript
jquery实现的蓝色二级导航条效果代码
2015/08/24 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
2015/11/29 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
2016/07/08 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
2018/04/08 Javascript
vue iview实现动态路由和权限验证功能
2018/04/17 Javascript
vue项目实现github在线预览功能
2018/06/20 Javascript
微信小程序表单弹窗实例
2018/07/19 Javascript
mpvue 单文件页面配置详解
2018/12/02 Javascript
分享一款超好用的JavaScript 打包压缩工具
2020/04/26 Javascript
[01:14:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Orenda
2014/05/22 DOTA
跟老齐学Python之再深点,更懂list
2014/09/20 Python
Python操作串口的方法
2015/06/17 Python
python模式 工厂模式原理及实例详解
2020/02/11 Python
django 连接数据库出现1045错误的解决方式
2020/05/14 Python
为什么python比较流行
2020/06/19 Python
AmazeUI 评论列表的实现示例
2020/08/13 HTML / CSS
Aeropostale官网:美国著名校园品牌及青少年服饰品牌
2019/03/21 全球购物
宏碁西班牙官网:Acer西班牙
2021/01/08 全球购物
中学实习教师自我鉴定
2013/12/12 职场文书
军人违纪检讨书
2014/02/04 职场文书
大学生求职计划书
2014/04/30 职场文书
客户经理岗位职责
2015/01/31 职场文书
个人简历自我评价怎么写
2015/03/10 职场文书
《认识年月日》教学反思
2016/02/19 职场文书
Java Spring读取和存储详细操作
2022/08/05 Java/Android