理解js中的作用域链增强with上下文以及变量泄露问题

作者：管理员 2020-12-24 19:18:56 分类：JavaScript 阅读（3475） 2

很多人可能不知道这个东西，也许你知道with关键字的作用在于改变作用域但会说它无用，但不管你是否知道或者支持with无用论，如果哪天有人拿它作为一道面试题，你事先没踩过这个坑或许难倒了你，下面结合实例理解下with。

with的基本用法

1
2
3
4
5
6
7
8

var obj = {
a: 1,
b: 2,
c: 3
};

// 如果想获取obj中的字段你恐怕会这样
console.log(obj.a,obj.b,obj.c)

使用with

1
2
3

with(obj){
console.log(a,b,c)
}

面试题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

var a = null;
function foo(obj) {
with (obj) {
a = 2;
}
}

var o1 = {
a: 3
};

var o2 = {
b: 3
}

foo(o1);
console.log(o1.a);

foo(o2);
console.log(o2.a);
console.log(a);

// 答案：2 nudefined 2

分析理解

首先，第一个o1传进去的是{a:3}，with中obj获取到了{a:3}，并且其中a再次改写成2，这时候我们输出o1.a就是2，因为对象改变是引用地址改变
同样道理我们再传入o2，但o2传进去的是{b:3}，with接收到了这个参数对象，重新改写a，发现这个对象没得a这个字段，然后你还要打印o2.a，结果就是undefined
在这一步时候我们虽然没有改写o2下的a成功，但执行a = 2，那既然传过来的对象没有a字段，那作为直接赋值变量就给到了全局a，结果第三步直接打印a找到了2

小结

浓缩点说：实例中原本想改变的是传进来的obj，如果obj有对应的a，那就把这个a给改变 = 2，如果发现obj中没有，那它也不会自动往obj上添加，但它会直接给全局增加一个a = 2，这就是with引起的变量泄露问题，想想上面我们一开始给全局定义了一个a初始化为null，但在后期使用with过程中某次修改失败，导致改变了全局的a，想想是不是有些可怕，这恐怕就是很多人支持with无用论的由来。

本站所有文章、图片、资源等如无特殊说明或标注，均为来自互联网或者站长原创，版权归原作者所有；仅作为个人学习、研究以及欣赏！如若本站内容侵犯了原著者的合法权益，可联系我们进行处理，邮箱：343049466@qq.com

赞(2) 打赏

标签：

Javascript with

上一篇：一颗老韭菜回顾三年债券、基金、股票投资理财生涯

下一篇：js面试题关于js基础的那些坑你还记得多少？

理解js中的作用域链增强with上下文以及变量泄露问题

with的基本用法

使用with

面试题

分析理解

小结

相关推荐

共 2 条评论关于"理解js中的作用域链增强with上下文以及变量泄露问题"

当前评论留言将回复给 - 巴山夜雨ソ涨相思点击取消

理解js中的作用域链增强with上下文以及变量泄露问题

with的基本用法

使用with

面试题

分析理解

小结

相关推荐

共 2 条评论关于"理解js中的作用域链增强with上下文以及变量泄露问题"

当前评论留言将回复给 - 巴山夜雨ソ涨相思 点击取消

当前评论留言将回复给 - 巴山夜雨ソ涨相思点击取消