文章目录
  1. 1. defined
  2. 2. main()

defined

看问题的时候顺便看到了, 闭包面试题
面试题看到最后一行的时候有点不清楚, 干脆重新理解一遍.

main()

个人理解:

看了MDN, 总结了一些结论
闭包就是一个 函数加上该函数的上下文环境 的集合.

一个比较常见的例子:
HTML:

1
2
3
<div class="divs"> aaa </div>
<div class="divs"> aaa </div>
<div class="divs"> aaa </div>

Javascript:

1
2
3
4
5
6
7
8
(function() {
var divs = document.querySelectorAll('.divs');
for(var i = 0;i < divs.length; i++){
divs[i].onclick = function() {
console.log(i);
}
}
})();

无论点哪个都只会输出3, 原因讲的已经很明确了, 在这个函数内部的上下文环境中, i会共用.
可能会问, 如果共用, 那么绑定的也只有第三个=> 在绑定的时候i还是从0->2的, 但是事件触发一定是i在等于3之后的事情了.

解决办法: 闭包传参, ES6新特性:let
这边给个闭包传参的例子:

1
2
3
4
5
6
7
8
(function(){
var divs = document.querySelectorAll('.divs');
for(var i = 0;i < divs.length; i++) {
divs[i].onclick = (function(i){
console.log(i);
})(i);
}
})();

这样每一个onclick都被赋予了一个独立的闭包,可以独立输出0-2.

另一个模拟类的例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function shoppingCart() {
var goods = 0;
return {
goodsAdd: function() {
++goods;
},
goodsRemove: function() {
--goods;
},
goodsShow: function() {
return goods;
}
}
}
var cartA = new shoppingCart();
var cartB = new shoppingCart();
cartA.goodsAdd();
cartA.goodsShow();

cartB.goodsAdd();
cartB.goodsRemove();
cartB.goodsShow();

shoppingCart函数有个函数内变量goods, 外部无法访问, 但是它可以通过内部的函数访问到, 即整个shoppingCart函数构成了一个闭包环境.
问了一下同学, 这个很像面向对象的一个类, goods就是所谓的private变量了.
而new出来的对象都是一个独立的闭包, 拥有独立的上下文环境和内容

文章目录
  1. 1. defined
  2. 2. main()