关于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 添加千分位与去掉千分位的示例
Jul 11 Javascript
jquery三个关闭弹出层的小示例
Nov 05 Javascript
文本框水印提示效果的简单实现代码
Feb 22 Javascript
浅谈jQuery中setInterval()方法
Jul 07 Javascript
JS+CSS简单树形菜单实现方法
Sep 12 Javascript
Javascript基础回顾之(一) 类型
Jan 31 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
原生js实现仿window10系统日历效果的实例
Oct 31 Javascript
详解vue-cli 接口代理配置
Dec 13 Javascript
vue移动端项目缓存问题实践记录
Oct 29 Javascript
Vue项目打包编译优化方案
Sep 16 Javascript
gojs实现蚂蚁线动画效果
Feb 18 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数组排序函数合集 以及它们之间的联系分析
2013/06/27 PHP
php similar_text()函数的定义和用法
2016/05/12 PHP
redis+php实现微博(一)注册与登录功能详解
2019/09/23 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
用JavaScript 处理 URL 的两个函数代码
2007/08/13 Javascript
Firefox中autocomplete="off" 设置不起作用Bug的解决方法
2011/03/25 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
2013/06/06 Javascript
jquery异步跨域访问代码
2013/06/28 Javascript
网页从弹窗页面单选框传值至父页面代码分享
2015/09/29 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
2015/10/24 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
2017/10/16 Javascript
JS和JQuery实现雪花飘落效果
2017/11/30 jQuery
web前端vue之vuex单独一文件使用方式实例详解
2018/01/11 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
2018/02/10 Javascript
JS实现灯泡开关特效
2020/03/30 Javascript
详解vue-router的导航钩子(导航守卫)
2020/11/02 Javascript
[40:12]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python实现html转ubb代码(html2ubb)
2014/07/03 Python
Python线程的两种编程方式
2015/04/14 Python
详解Python中表达式i += x与i = i + x是否等价
2017/02/08 Python
python基于twisted框架编写简单聊天室
2018/01/02 Python
python使用Matplotlib绘制分段函数
2018/09/25 Python
python 高效去重复 支持GB级别大文件的示例代码
2018/11/08 Python
关于pandas的离散化,面元划分详解
2019/11/22 Python
numpy实现神经网络反向传播算法的步骤
2019/12/24 Python
Python3 虚拟开发环境搭建过程(图文详解)
2020/01/06 Python
python如何保存文本文件
2020/06/07 Python
使用python-cv2实现Harr+Adaboost人脸识别的示例
2020/10/27 Python
研究生自我鉴定范文
2013/10/30 职场文书
JAVA程序员自荐书
2014/01/30 职场文书
超市促销活动方案
2014/03/05 职场文书
村抢险救灾方案
2014/05/09 职场文书
人事行政主管岗位职责
2015/04/09 职场文书
家长对学校的意见和建议
2015/06/03 职场文书
Java实现学生管理系统(IO版)
2022/02/24 Java/Android
AngularJS实现多级下拉框
2022/03/25 Javascript