前面说了那么多，相信大家已经理解了为什么不推荐使用with关键字以及可能存在的问题。下面我们来看看一些更复杂的情况，看下面的代码：
var obj = { x: 10, foo: function () { with (this) { var x = 20; var y = 30; console.log(y);//30 } } }; obj.foo(); console.log(obj.x);//20 console.log(obj.y);//undefined
在这段代码中，分别输出30，20，undefined的。涉及的知识点也比较多：with关键字，this关键字，变量提升等等，我们来一一解释一下。
1、this关键字
关于this关键字的文章google上面相当多，这里不再赘述，我们只需记住一点：this关键字始终指向调用函数的对象。在这里，foo函数中，this指向的就是obj对象。因此在with(this)语句块里面，可以直接通过x变量来访问obj的x属性。
2、变量提升
js中的变量提升也是一个经常遇到的问题，我们可以简单理解成在js中，变量声明会被提升到函数的顶部，尽管有的时候，它是在后面声明的。
所以上面的代码可以解析为：
var obj = { x: 10, foo: function () { var x;//声明局部变量x var y;//声明局部变量y with (obj) { x = 20;//访问变量x，在obj上找到x，则修改为20 y = 30;//访问变量y，在bojg上找不到y，则进一步查找，找到局部变量y，修改为30 console.log(y);//30//直接输出局部变量y， } } }; obj.foo(); console.log(obj.x);//20，obj.x已被修改为20 console.log(obj.y);//undefined，obj不存在y属性，则为undefined
上面的注释中，解释了代码的执行过程，相信大家已经理解了为什么会出处30,20，undefined的原因。
有兴趣的同学可以看看下面这段代码：
({ x: 10, foo: function () { function bar() { console.log(x); console.log(y); console.log(this.x); } with (this) { var x = 20; var y = 30; bar.call(this); } } }).foo();
这段代码会输出什么？为什么呢？
总结
本文总结了with语句的特点和弊端，总的来说，强烈不推荐使用with关键字。其实在日常编码中，我们只需要知道不去使用with就可以了，但是有的时候我们可能会遇到一些关于with的奇奇怪怪的问题，想要找出真正的原因，就要深入理解with关键字，这有助于我们去深入学习JS这门语言，同时也是学习JS的一个乐趣。
您可能感兴趣的文章: