关于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(DHTML)中的一些技巧
Jan 09 Javascript
菜鸟javascript基础整理1
Dec 06 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
Apr 16 Javascript
javascript实现tab响应式切换特效
Jan 29 Javascript
Bootstrap图片轮播组件使用实例解析
Jun 30 Javascript
js中作用域的实例解析
Mar 16 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
Oct 25 Javascript
Angular服务Request异步请求的实例讲解
Aug 13 Javascript
对vue中methods互相调用的方法详解
Aug 30 Javascript
扫微信小程序码实现网站登陆实现解析
Aug 20 Javascript
基于iview-admin实现动态路由的示例代码
Oct 02 Javascript
python实现迭代法求方程组的根过程解析
Nov 25 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
SMARTY学习手记
2007/01/04 PHP
php学习之 数组声明
2011/06/09 PHP
PHP数组排序之sort、asort与ksort用法实例
2014/09/08 PHP
php中strtotime函数用法详解
2014/11/15 PHP
PHP手机号中间四位用星号*代替显示的实例
2017/06/02 PHP
PHP中数组转换为SimpleXML教程
2019/01/27 PHP
javascript代码编写需要注意的7个小细节小结
2011/09/21 Javascript
jquery 扑捉回车键事件代码
2014/04/24 Javascript
js判断浏览器版本以及浏览器内核的方法
2015/01/20 Javascript
jQuery插件制作之全局函数用法实例
2015/06/01 Javascript
Javascript实现单例模式
2016/01/24 Javascript
JS字符串的切分用法实例
2016/02/22 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
IE下JS保存图片的简单实例
2016/07/15 Javascript
js实现背景图自适应窗口大小
2017/01/10 Javascript
基于JavaScript实现五子棋游戏
2020/08/26 Javascript
node vue项目开发之前后端分离实战记录
2017/12/13 Javascript
微信小程序仿朋友圈发布动态功能
2018/07/15 Javascript
nodejs读取图片返回给浏览器显示
2019/07/25 NodeJs
Python3.6正式版新特性预览
2016/12/15 Python
Django自定义分页效果
2017/06/27 Python
浅谈python中str字符串和unicode对象字符串的拼接问题
2018/12/04 Python
Python pickle模块实现对象序列化
2019/11/22 Python
python pandas.DataFrame.loc函数使用详解
2020/03/26 Python
Python接口测试环境搭建过程详解
2020/06/29 Python
idea2020手动安装python插件的实现方法
2020/07/17 Python
城市观光通行证:The Sightseeing Pass
2018/04/28 全球购物
欧洲、亚洲、非洲和拉丁美洲的度假套餐:Great Value Vacations
2019/03/30 全球购物
Mountain Warehouse波兰官方网站:英国户外品牌
2019/08/29 全球购物
2014年管理工作总结
2014/11/22 职场文书
工程部岗位职责
2015/02/10 职场文书
教师个人学习总结
2015/02/11 职场文书
学生检讨书范文
2019/06/24 职场文书
奖学金发言稿(范文)
2019/08/21 职场文书
python实现简单的名片管理系统
2021/04/26 Python
MySQL query_cache_type 参数与使用详解
2021/07/01 MySQL