关于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 animate 动画效果使用说明
Nov 04 Javascript
jQuery把表单元素变为json对象
Nov 06 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
Nov 06 Javascript
简介JavaScript中substring()方法的使用
Jun 06 Javascript
TypeScript 中接口详解
Jun 19 Javascript
jQuery实现为图片添加镜头放大效果的方法
Jun 25 Javascript
详解 javascript中offsetleft属性的用法
Nov 11 Javascript
浅谈js构造函数的方法与原型prototype
Jul 04 Javascript
javaScript日期工具类DateUtils详解
Dec 08 Javascript
Vue.js自定义事件的表单输入组件方法
Mar 08 Javascript
Vue 中axios配置实例详解
Jul 27 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
Nov 21 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 编写的日历
2006/10/09 PHP
Zend Studio 无法启动的问题解决方法
2008/12/04 PHP
php jquery 实现新闻标签分类与无刷新分页
2009/12/18 PHP
PHP实用函数分享之去除多余的0
2015/02/06 PHP
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
php 实现进制相互转换
2016/04/07 PHP
PHP远程连接oracle数据库操作实现方法图文详解
2019/04/11 PHP
PHPstorm启用自动换行的方法详解(IDE)
2020/09/17 PHP
js 获取子节点函数 (兼容FF与IE)
2010/04/18 Javascript
jquery选择器之属性过滤选择器详解
2014/01/27 Javascript
使用jQuery动态加载js脚本文件的方法
2014/04/03 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
2014/06/23 Javascript
javascript获取当前鼠标坐标的方法
2015/01/10 Javascript
JS实现光滑展开合拢的菜单效果代码
2015/09/16 Javascript
AngularJS中run方法的巧妙运用
2017/01/04 Javascript
js遍历json的key和value的实例
2017/01/22 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
2017/02/10 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
2017/11/20 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
2018/01/25 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
2018/08/05 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
2018/08/24 Javascript
在vue中使用vue-echarts-v3的实例代码
2018/09/13 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
[54:19]完美世界DOTA2联赛PWL S2 Magma vs PXG 第二场 11.28
2020/12/01 DOTA
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
Python3将jpg转为pdf文件的方法示例
2019/12/13 Python
Python入门基础之数字字符串与列表
2021/02/01 Python
html5 css3网站菜单实现代码
2013/12/23 HTML / CSS
沙特阿拉伯网上购物:Sayidaty Mall
2018/05/06 全球购物
澳大利亚办公室装修:JasonL Office Furniture
2019/06/25 全球购物
澳大利亚在线批发商:Simply Wholesale
2021/02/24 全球购物
办公室保洁员岗位职责
2013/12/02 职场文书
2014年村委会工作总结
2014/11/24 职场文书
优秀乡村医生事迹材料(2016精选版)
2016/02/29 职场文书
Python实现简单的俄罗斯方块游戏
2021/09/25 Python
《火纹风花雪月无双》预告“神秘雇佣兵” 紫发剑客
2022/04/13 其他游戏