关于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 相关文章推荐
js change,propertychange,input事件小议
Dec 20 Javascript
jQuery判断密码强度实现思路及代码
Apr 24 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
Aug 21 Javascript
javascript中数组中求最大值示例代码
Dec 18 Javascript
浅谈jquery中delegate()与live()
Jun 22 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
Apr 27 Javascript
深入理解JavaScript中的对象复制(Object Clone)
May 18 Javascript
详解handlebars+require基本使用方法
Dec 21 Javascript
AngularJS中的promise用法分析
May 19 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 Javascript
javascript防抖函数debounce详解
Jun 11 Javascript
微信小程序实现点击效果
Jun 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开发者事半功倍的十大技巧小结
2010/04/20 PHP
PHP 字符串加密函数(在指定时间内加密还原字符串,超时无法还原)
2010/04/28 PHP
php通过array_merge()函数合并关联和非关联数组的方法
2015/03/18 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
JS是否可以跨文件同时控制多个iframe页面的应用技巧
2007/12/16 Javascript
javascript中使用正则计算中文长度的例子
2014/04/29 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
2014/08/04 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
2014/09/06 Javascript
后台获取ZTREE选中节点的方法
2015/02/12 Javascript
JavaScript中常见获取元素的方法汇总
2015/03/04 Javascript
jQuery基于muipicker实现仿ios时间选择
2016/02/22 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
2016/08/11 Javascript
JavaScript 完成注册页面表单校验的实例
2017/08/19 Javascript
Java设计中的Builder模式的介绍
2018/03/22 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
2018/08/24 Javascript
vue组件之间的数据传递方法详解
2019/04/19 Javascript
vue.js路由mode配置之去掉url上默认的#方法
2019/11/01 Javascript
vue使用原生swiper代码实例
2020/02/05 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
python定时采集摄像头图像上传ftp服务器功能实现
2013/12/23 Python
讲解Python中的递归函数
2015/04/27 Python
Python常用库推荐
2016/12/04 Python
高效测试用例组织算法pairwise之Python实现方法
2017/07/19 Python
简单了解Python3里的一些新特性
2019/07/13 Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
2020/02/26 Python
详解python UDP 编程
2020/08/24 Python
服装设计行业个人的自我评价
2013/12/20 职场文书
校园活动策划方案
2014/06/13 职场文书
授权委托书样本及填写说明
2014/09/19 职场文书
扬州个园导游词
2015/02/06 职场文书
创业项目大全(适合在家创业的项目)
2019/08/15 职场文书
《童年》读后感(三篇)
2019/08/27 职场文书
读《瓦尔登湖》有感:每个人都需要一个瓦尔登湖
2019/10/17 职场文书
导游词之南京汤山温泉
2019/11/26 职场文书
Go语言的协程上下文的几个方法和用法
2022/04/11 Golang
Python安装使用Scrapy框架
2022/04/12 Python