`
wezly
  • 浏览: 487756 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

关于JavaScript的with语句

阅读更多

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

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

 

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

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

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
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 语句内部通过对象父节点修改数值

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

由上面的测试 3 可知, with 语句内部的节点父节点修改后, 不会同步到节点本身. 也就是说, 不能保证内外数值的一致性. 这是可能成为项目里面隐藏性很高的 bug.
那我们该怎么办呢? 接受那很长的一串逐级访问, 还是另有他法?

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

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

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

分享到:
评论

相关推荐

    javascript完美学习视频教程-----11.javascript流程控制-跳转语句、with语句

    本教程专注于JavaScript的流程控制,特别是跳转语句和with语句,这两部分是编写高效、逻辑清晰的JavaScript代码的关键。 首先,我们来详细讲解一下跳转语句。在编程中,跳转语句用于改变程序执行的顺序,使得代码...

    Javascript中With语句用法实例

    With语句在JavaScript中是一种特殊的语法结构,它的作用是扩展一个语句的作用域链。通过with语句可以不需要重复引用某个对象就能多次访问该对象的属性。这在某些情况下可以减少代码的书写量,但同时它也存在争议,...

    Javascript流程控制语句

    with语句允许使用简短的形式访问对象的属性,但不建议使用,因为它可能会导致作用域污染。 ```javascript var obj = {a: 1, b: 2}; with (obj) { console.log(a); // 输出 1 console.log(b); // 输出 2 } ``` ...

    深入浅析JavaScript中with语句的理解

    JavaScript 有个 with 关键字, with 语句的原本用意是为逐级的对象访问提供命名空间式的速写方式。这篇文章主要介绍了JavaScript中with语句的相关知识,感兴趣的朋友一起学习吧

    关于JavaScript的with 语句的使用方法

    JavaScript中的`with`语句是一种特殊的语法结构,它允许在特定的作用域内简化对象属性的访问。`with`语句的基本语法如下: ```javascript with (expression) { // 代码块 } ``` 在这里,`expression`通常是一个...

    Learn JavaScript with p5.js--2018年

    1. **基础知识**:书中首先介绍了JavaScript的基础概念,如变量、数据类型(字符串、数字、布尔值等)、条件语句(if-else)、循环(for、while)等。这些是编程的基础,也是后续学习的关键。 2. **p5.js入门**:...

    JavaScript严格模式禁用With语句的原因

    如果在with语句块中引用了未定义的变量,JavaScript会继续在with语句内的对象中查找这个变量,而不是直接报错。这会使得代码的可读性变差,并且引入了意外的行为。比如,在上面提供的代码片段中,变量job在Person...

    Beginning JavaScript with DOM Scripting and Ajax

    学习JavaScript首先要掌握变量声明、数据类型、运算符、流程控制语句(如if...else,for,while等)、函数定义与调用,以及对象和原型链的概念。此外,理解闭包和作用域也是JavaScript编程中的关键。 二、DOM...

    js的with语句使用方法

    js的with语句使用方法 js的with语句是一种特殊的语句,用于简化对某个对象的多次访问。它可以方便地用来引用某个特定对象中已有的属性,但是不能用来给对象添加属性。要给对象创建新的属性,必须明确地引用该对象。...

    How to do everything with javascript

    "How to do everything with JavaScript" 涵盖了从基础到高级的JavaScript知识,旨在帮助开发者全面理解和掌握这门语言的体系结构及其实际应用。这本书可能包括了变量、数据类型、控制结构、函数、对象、数组、DOM...

    javascript中的with语句学习笔记及用法

    JavaScript中的`with`语句是一种特殊的作用域控制结构,它允许你在一段代码中方便地访问某个对象的属性,而无需反复地使用`.`或`[]`操作符。`with`语句的基本语法是: ```javascript with (expression) { // 代码...

    Vue js with语句原理及用法解析

    // 使用with语句 with (obj) { var a = a; var b = b; var c = c; } ``` 使用`with`可以让代码更简洁,因为不需要反复写`obj.`。然而,这也有其潜在的问题: 1. **性能影响**:JavaScript引擎为了优化代码,...

    Simply JavaScript, JavaScript Beginning

    "Simply JavaScript" 和 "Beginning JavaScript with DOM Scripting and Ajax, 2nd Edition" 这两本书为初学者提供了深入理解并掌握JavaScript的绝佳资源。 "Simply JavaScript" 作为一本JavaScript的初级教程,...

    【第十一章】JavaScript【运算符语句】

    7. **with语句**:虽然不推荐使用,但with允许动态改变作用域链,访问对象的属性。 8. **try...catch...finally语句**:用于异常处理,当代码块可能抛出错误时,可以捕获并处理异常。 通过理解和熟练运用这些...

    JavaScript标准参考教程

    特别地,还提到了类似数组的对象和with语句。 数组作为JavaScript中重要的数据结构,其章节详述了数组的定义、length属性、数组的空位处理以及ECMAScript 5中新增的数组方法(如map、forEach等),这些方法极大地...

    JS分类语句大全

    with语句可以临时地将对象作为当前对象,以便简化对象的访问。语法如下: with(对象) { 执行语句...... } new语句用于创建一个新的对象实例。语法如下: var 对象名 = new 构造函数(参数); delete语句用于删除...

Global site tag (gtag.js) - Google Analytics