什么是闭包？
在谈闭包之前，先要了解一下作用域的问题。
在js中，块级作用域（大括号中的领域）是不存在的，在块级作用域中定义的变量，离开块级作用域后就被回收了。
而js中的作用域分为全局作用域和函数创建的函数作用域，作用域控制着变量和参数的可见性以及生命周期，在不同作用域下的同名变量不会冲突。
了解了作用域之后再来看看闭包，首先看一个例子
function fn(){
var num = 1;
var print = function() {
console.log(num);
}
num++;
return print;
}
var fn1 = fn();
fn1();//输出 2
这里fn函数返回的是一个函数，并赋给了fn1，调用fn1的时候，函数需要取num的值，但是在print的这个匿名函数里面没有定义num的值，这个时候就需要跨作用域到它的上一级作用域中去寻找num的值，这里的num值就被保存在了一个闭包中，函数退出前，闭包会保存此时的上下文环境，而不是直接销毁。
要给闭包一个文字上的定义，我并没有想到有什么通俗易懂的说法，但是通过这个例子应该能体会到闭包是个什么东西，其实记住当你在一个函数中使用了关键字function的时候，就已经创建了一个闭包。
闭包何时创建？
下面一个例子说明了闭包是在函数调用的时候被创建的，而不是声明的时候
function newClosure(someNum, someRef) {
var num = someNum;//数组中数字的个数
var anArray = [1,2,3];
var ref = someRef;
return function(x) {
num += x;
anArray.push(num);
console.log('num: ' + num +
'\nanArray ' + anArray.toString() +
'\nref.someVar ' + ref.someVar);
}
}
obj = {someVar: 4};
fn1 = newClosure(4, obj);
fn2 = newClosure(5, obj);
fn1(1); // num: 5; anArray: 1,2,3,5; ref.someVar: 4;
fn2(1); // num: 6; anArray: 1,2,3,6; ref.someVar: 4;
obj.someVar++;
fn1(2); // num: 7; anArray: 1,2,3,5,7; ref.someVar: 5;
fn2(2); // num: 8; anArray: 1,2,3,6,8; ref.someVar: 5;
fn1和fn2分别被调用了两次，而分别创建了四个不同闭包，调用函数时需要用到的变量的值都是在闭包中取得的。
循环中的问题
当在一个循环中定义了函数，创建了闭包的话，就会有一些奇怪的问题出现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<div id="node">
<div>node1</div>
<div >node2</div>
<div>node3</div>
</div>
<script type="text/javascript">
var node = document.getElementById('node').childNodes;
var handlers = function(node){
for (var i = 0; i < node.length; i++) {
node[i].onclick = function() {
console.log(i);
};
};
}
handlers(node);
</script>
</body>
</html>
这个例子里面，分别点击页面中的node1，node2，node3，我期望的结果应该是在控制台看到1、3、5（这里需要注意一下，因为一个dom元素的子节点，是分为元素节点和文本节点的，childNodes又是从0开始的，所以分别点击的时候应该显示1、3、5），而实际上的结果却是不管点击哪个，出现的全是7。
会出现这样的状况，是因为handlers这个函数创建了一个闭包，在其中的局部变量i对应的值也只有一个，所以当绑定到onclick上面的匿名函数调用的时候，取到的闭包中的值是循环结束后的 i ,元素节点加上文本节点一共6个，然后结束后因为 i++ 变为7。
那么应该如何解决这个问题呢？首先思考一下问题产生的原因，是这个函数创建的闭包中的变量的值只有一个，每次使用的都是闭包里变量的当前的值。要解决这个问题，可以想办法将每次循环中的 i 值赋给匿名函数,经过改进后，如下：
var node = document.getElementById('node').childNodes;
var handlers = function(node){
for (var i = 0; i < node.length; i++) {
(function(i){
node[i].onclick = function() {
console.log(i);
}
})(i);
}
}
handlers(node);
此时，再分别点击三个节点，控制台中输出的则是预期的值：1、3、5，这里用了一个函数把为节点onclick事件绑定函数的代码包了起来，并且传入了参数 i，那么这里就相当于循环了多少次，就创建了多少个闭包，而传入的 i 值，是在当前闭包中取得的，所以会是当前循环的 i 值，而不是循环完成之后的 i 值。
如果去掉了传入的参数 i ，还是会出现一样的问题，但是在这个函数里面再定义一个变量 j ，并将 i 值赋给 j ，最后输出 j 结果又正确了
var node = document.getElementById('node').childNodes;
var handlers = function(node){
for (var i = 0; i < node.length; i++) {
(function(){
var j = i;
node[i].onclick = function() {
console.log(j);
}
})();
}
}
handlers(node);
这里原因和上一个方法其实是一样的，都是每次循环都创建了一个闭包，输出的值都是每个闭包中分别储存的值。
此外，还有一种值得提到的方法，那就是用 let 来定义变量， let 是es5中添加的严格运行模式， let 不能像var一样重复声明同一个变量，并且 let 声明的变量是拥有块级作用域的。
var node = document.getElementById('node').childNodes;
var handlers = function(node){
for (var i = 0; i < node.length; i++) {
let j = i;
node[i].onclick = function() {
console.log(j);
}
}
}
handlers(node);
这个时候点击节点输出的结果也是正确的。
网友评论