关于 JavaScript 的 with 语句

开发 前端
With 语句可以对某个对象执行一系列的语句,而不用重复指出对象的名称。本文介绍的是JavaScript中的with 语句,一起来看。

JavaScript 有个 with 关键字, with 语句的原本用意是为逐级的对象访问提供命名空间式的速写方式. 也就是在指定的代码区域, 直接通过节点名称调用对象.

用过 Java 和 .NET 的同学对包或命名空间的概念应该不会陌生, 正因为有这个概念, 使代码的简洁易读得到了保证. 不知 JavaScript 设计之初是如何定位 with 语句的, 个人觉得它们之间有一定的相似度. 如:

  1. apple.banana.candy.dog.egg.fog.god.huh.index = 0;  
  2. doSomething(apple.banana.candy.dog.egg.fog.god.huh.index);  

利用 with 语句, 可以写为以下代码.

  1. with(apple.banana.candy.dog.egg.fog.god.huh)   
  2. {  
  3. c = 0;  
  4. doSomething(index);  
  5. }  

看起来很美妙, 却存在致命的缺陷. 下面我们来进行一些小测试吧.

1. 在 with 语句内部通过内部变量修改数值

  1. var root = {  
  2. branch: {  
  3. node: 1  
  4. }  
  5. };  
  6. with(root.branch) {  
  7. node = 0;  
  8. // 显示 0, 正确!  
  9. alert(node);  
  10. }  
  11. // 显示 0, 正确!  
  12. alert(root.branch.node);  

2. 在 with 语句内部通过对象节点修改数值

  1. var root = {  
  2. branch: {  
  3. node: 1  
  4. }  
  5. };  
  6. with(root.branch) {  
  7. root.branch.node = 0;  
  8. // 显示 0, 正确!  
  9. alert(node);  
  10. }  
  11. // 显示 0, 正确!  
  12. alert(root.branch.node);  

经过测试 1 和测试 2, 乍看没什么问题, 但是... 请看测试 3.

3. 在 with 语句内部通过对象父节点修改数值

  1. var root = {  
  2. branch: {  
  3. node: 1  
  4. }  
  5. };  
  6. with(root.branch) {  
  7. root.branch = {  
  8. node: 0  
  9. };  
  10. // 显示 1, 错误!  
  11. alert(node);  
  12. }  
  13. // 显示 0, 正确!  
  14. alert(root.branch.node);  

由上面的测试 3 可知, with 语句内部的节点父节点修改后, 不会同步到节点本身. 也就是说, 不能保证内外数值的一致性. 这是可能成为项目里面隐藏性很高的 bug.

那我们该怎么办呢? 接受那很长的一串逐级访问, 还是另有他法?

方法是有的. 我们可以通过别名引用父节点的方式来调用节点对象, 如:

  1. var root = {  
  2. branch: {  
  3. node: 1  
  4. }  
  5. };  
  6. var quote = root.branch;  
  7. quote.node = 0;  
  8. // 显示 0, 正确!  
  9. alert(root.branch.node);  

我相信很少人会用 with 语句, 也不会有很多人知道这个关键字, 但我觉得这是个有问题的语句, 压根就不应该使用, 所以写个小文记录一下.

原文地址:http://www.neoease.com/javascript-with-statement/

【编辑推荐】

  1. Web移动应用 HTML5 CSS和JavaScript
  2. JavaScript 假如default不是switch的***一项
  3. Javascript中闭包的作用域链
  4. 让浏览器非阻塞加载javascript的几种方式
  5. JavaScript实现二级联动下拉框
责任编辑:于铁 来源: mg12's Blog
相关推荐

2011-05-26 13:26:42

if

2023-04-10 16:09:58

2022-07-06 05:59:40

数据库mysql

2016-09-14 09:20:05

JavaScript闭包Web

2010-05-26 14:41:38

JavaScript

2017-04-06 14:10:08

JavaScript数组排序

2021-06-09 10:45:12

JavaScript开发 编程

2009-06-17 16:01:28

2016-03-21 09:26:04

JavaScript技术栈展望

2022-11-16 14:23:37

JavaScript参数属性

2009-07-31 14:47:22

JavaScript函C#

2020-10-14 08:04:28

JavaScrip

2022-07-04 08:51:43

条件语句JavaScript

2011-08-29 17:13:03

外连接不等值连接等值连接

2009-06-10 22:03:40

JavaScript内IE内存泄漏

2022-05-08 19:58:10

JSONPJavaScript

2009-11-30 14:52:01

华为路由器配置

2009-12-16 10:14:03

路由器端口

2020-07-01 08:37:31

JavaScript开发技术

2023-01-17 14:01:19

JavaScript类型转换字符串
点赞
收藏

51CTO技术栈公众号