关于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 作用域使用说明
Aug 13 Javascript
Mac地址验证的javascript代码
Nov 09 Javascript
node.js中的fs.truncate方法使用说明
Dec 15 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
Feb 20 Javascript
vue中渐进过渡效果实现
Oct 27 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
Dec 13 Javascript
vue router路由嵌套不显示问题的解决方法
Jun 17 Javascript
vue监听scroll的坑的解决方法
Sep 07 Javascript
JavaScript闭包原理与用法实例分析
Aug 10 Javascript
简单了解TypeScript中如何继承 Error 类
Jun 21 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
Aug 06 Javascript
vue项目实现分页效果
Mar 24 Vue.js
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函数之日期时间函数date()使用详解
2013/09/09 PHP
PHP图形计数器程序显示网站用户浏览量
2016/07/20 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
PHP如何防止用户重复提交表单
2020/12/09 PHP
javascript之更有效率的字符串替换
2008/08/02 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
2014/01/10 Javascript
apply和call方法定义及apply和call方法的区别
2015/11/15 Javascript
JavaScript中数组添加值和访问值常见问题
2016/02/06 Javascript
JS创建事件的三种方法(实例代码)
2016/05/12 Javascript
JavaScript类型系统之布尔Boolean类型详解
2016/06/26 Javascript
jQuery 全选 全不选 事件绑定的实现代码
2017/01/23 Javascript
vue-cli创建的项目,配置多页面的实现方法
2018/03/15 Javascript
vue之将echart封装为组件
2018/06/02 Javascript
[03:38]2014DOTA2西雅图国际邀请赛 VG战队巡礼
2014/07/07 DOTA
[12:21]VICI vs TNC (BO3)
2018/06/07 DOTA
[01:15:00]LGD vs Mineski Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
[47:03]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第二场 12.10
2020/12/13 DOTA
Python使用base64模块进行二进制数据编码详解
2018/01/11 Python
python元组和字典的内建函数实例详解
2019/10/22 Python
原生python实现knn分类算法
2019/10/24 Python
python多进程下的生产者和消费者模型
2020/05/07 Python
keras处理欠拟合和过拟合的实例讲解
2020/05/25 Python
详解CSS3中常用的样式【基本文本和字体样式】
2020/10/20 HTML / CSS
使用分层画布来优化HTML5渲染的教程
2015/05/08 HTML / CSS
浅谈HTML5 & CSS3的新交互特性
2016/07/19 HTML / CSS
美国百货齐全的精品网站,提供美式风格的产品:Overstock.com
2016/07/22 全球购物
玩具反斗城天猫官方旗舰店:享誉全球的玩具店
2017/10/10 全球购物
在线吉他课程,学习如何弹吉他:Fender Play
2019/02/28 全球购物
美国便宜的横幅和标志印刷在线:Best of Signs
2019/05/29 全球购物
电子商务专业在校生实习自我鉴定
2013/09/29 职场文书
自我鉴定书范文
2013/10/02 职场文书
业务部主管岗位职责
2014/01/29 职场文书
2014年技术工作总结范文
2014/11/20 职场文书
超级礼物观后感
2015/06/15 职场文书
mysql连接查询中and与where的区别浅析
2021/07/01 MySQL
Spring中的@Transactional的工作原理
2022/06/05 Java/Android