关于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多浏览器捕捉回车事件代码
Jun 22 Javascript
dwz 如何去掉ajaxloading具体代码
May 22 Javascript
jQuery实现的Div窗口震动特效
Jun 09 Javascript
javascript将异步校验表单改写为同步表单
Jan 27 Javascript
jQuery实现简单的日期输入格式化控件
Mar 12 Javascript
js时间戳转为日期格式的方法
Dec 28 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
Mar 12 Javascript
JavaScript学习笔记之创建对象
Mar 25 Javascript
基于JavaScript实现在新的tab页打开url
Aug 04 Javascript
javascript合并两个数组最简单的实现方法
Sep 14 Javascript
Vue使用虚拟dom进行渲染view的方法
Dec 26 Javascript
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 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
phpmyadmin操作流程
2006/10/09 PHP
PHP实现的一致性哈希算法完整实例
2015/11/14 PHP
Adnroid 微信内置浏览器清除缓存
2016/07/11 PHP
PHP实现批量修改文件名的方法示例
2019/09/18 PHP
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
2012/01/13 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
2014/05/11 Javascript
javascript实现简单加载随机色方块
2015/12/25 Javascript
深入浅析JS的数组遍历方法(推荐)
2016/06/15 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
2016/06/20 Javascript
IntersectionObserver API 详解篇
2016/12/11 Javascript
在javaScript中检测数据类型的几种方式小结
2017/03/04 Javascript
Node.js 回调函数实例详解
2017/07/06 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
2018/09/13 Javascript
vue单页面在微信下只能分享落地页的解决方案
2019/04/15 Javascript
Vue 指令实现按钮级别权限管理功能
2019/04/23 Javascript
原生JS实现图片懒加载之页面性能优化
2019/04/26 Javascript
小程序中this.setData的使用和注意事项
2019/08/28 Javascript
Node.js开发之套接字(socket)编程入门示例
2019/11/05 Javascript
Vue如何使用混合Mixins和插件开发详解
2020/02/05 Javascript
Python Web框架Flask中使用百度云存储BCS实例
2015/02/08 Python
Python检测一个对象是否为字符串类的方法
2015/05/21 Python
基于python的七种经典排序算法(推荐)
2016/12/08 Python
Python读取图片为16进制表示简单代码
2018/01/19 Python
tensorflow学习笔记之简单的神经网络训练和测试
2018/04/15 Python
numpy.linspace 生成等差数组的方法
2018/07/02 Python
python+os根据文件名自动生成文本
2019/03/21 Python
python关于矩阵重复赋值覆盖问题的解决方法
2019/07/19 Python
什么是python类属性
2020/06/10 Python
Python环境管理virtualenv&virtualenvwrapper的配置详解
2020/07/01 Python
python开发一款翻译工具
2020/10/10 Python
python爬虫看看虎牙女主播中谁最“顶”步骤详解
2020/12/01 Python
Exoticca英国:以最优惠的价格提供豪华异国情调旅行
2018/10/18 全球购物
造型师求职自荐信
2013/09/27 职场文书
好的演讲稿开场白
2013/12/30 职场文书
离职感谢信怎么写
2015/01/22 职场文书
自我工作评价范文
2015/03/06 职场文书