前言
前几天看了一篇关于闭包的文章，才想起还有闭包这东西，好久没有用到，都快把它忘记了。
于是才复习一下，记下这文章，本文主要说明：
- 闭包
- 闭包的作用
- 利用闭包解决作用域问题的几种方法
闭包
Js中所有的function都是一个闭包。不过我们一般所说的闭包是由嵌套的function所产生的，嵌套的function所产生的闭包更加强大。
function a(){
var i =0;
function b(){
console.log(++i);
}
return b;
}
var c = a();
c();
闭包的作用
闭包的作用就是在a执行完并返回后，闭包使得js的垃圾回收机制GC不会收回a所占用的资源，因为a的内部函数b的执行需要依赖a中的变量。这是对闭包作用的非常直白的描述，不专业也不严谨，但大概意思就是这样，理解闭包需要循序渐进的过程。
在上面的例子中，由于闭包的存在使得函数a返回后，a中的i始终存在，这样每次执行c()，i都是自加1后输出i的值。
那么我们来想象另一种情况，如果a返回的不是函数b，情况就完全不同了。因为a执行完后，b没有被返回给a的外界，只是被a所引用，而此时a也只会被b引 用，因此函数a和b互相引用但又不被外界打扰(被外界引用)，函数a和b就会被GC回收。
需要注意的是，闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。
利用闭包解决作用域问题的几种方法
作用域产生的问题
- 先举个事件绑定的栗子吧!
for(var i=0; i<10; i++) {
$('#ul').bind('click', function() {
console.log(i)
})
}
运行结果是：输出10个10
为什么是10个10呢？
因为在for循环中，最终i的值是9，但是根据for循环的原理，在循环到i为9之后，会执行i++，之后再去判断i<10，此时已不满足条件，所以终止循环，最终i值为10。所以会输出10个10。
- 再说说普通事件
for(var i=0; i<10; i++) {
document.getElementById('ul').onclick = function() {
console.log(i)
}
}
运行结果是：输出1个10
在循环中，普通的事件绑定是会被覆盖，所以其实ul只绑定了一个事件，也就是循环到最后的那个事件。
而上面的bind绑定事件则是给ul绑定了10个事件，这也就解释了为什么普通事件只输出一个10，而绑定事件输出10个原因。
- 作用域所产生的问题，比较常见的还有Tab切换，这里也将使用Tab，来说明作用域如何产生的问题及解决的方法。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="wrap">
<ul id="list">
<li>list-1</li>
<li>list-2</li>
<li>list-3</li>
</ul>
<div id="con">
<div>content1</div>
<div>content2</div>
<div>content3</div>
</div>
</div>
<script>
var olist = document.getElementById('list');
var alist = olist.getElementsByTagName('li');
var ocon = document.getElementById('con');
var acon = ocon.getElementsByTagName('div');
for(var i = 0;i<alist.length;i++){
alist[i].onmouseover=function(){
for(var j = 0 ;j<alist.length;j++){
alist[j].style.backgroundColor='#aaa';
acon[j].style.display='none';
}
this.style.backgroundColor='#ccc';
acon[i].style.display = 'block';
}
}
</script>
</body>
</html>
- 在这个Tab切换中，当鼠标移动到list2或者list3的时候，你会发现报错了，说是acon[i].style没有定义。
按照我们现在的逻辑，使用for循环然后在循环中为list的分别添加mouseover的事件，如果鼠标移动到对应的list上面，则执行对应的function。
在function中，我们先使用另外一个循环让所有的list的背景颜色修改为#aaa，再把所有的content隐藏，然后再将鼠标所在的list的颜色修改为#ccc，并且把对应的content显示出来。- 那为什么会报错呢？
首先我们acon[i].style.display = 'block';前面添加一个输出，<code>console.log(i)</code>，结果会输出3，那为什么会是3呢？这也就和上面我们讲到的事件绑定的问题一样了，简单的说就是i被污染了，所以输出了3。- 那么这个问题如何解决呢？
几种解决方法
- 使用for循环的时候给list添加一个index的值，并将i保存在index中，防止i被污染为3。
for (var i = 0; i < alist.length; i++) {
alist[i].index = i;
alist[i].onmouseover = function () {
for (var j = 0; j < alist.length; j++) {
alist[j].style.backgroundColor = '#aaa';
acon[j].style.display = 'none';
}
this.style.backgroundColor = '#ccc';
acon[this.index].style.display = 'block';
}
}
- 利用this来解决此问题，而不用使用到被污染的i
for (var i = 0; i < alist.length; i++) {
alist[i].onmouseover = function () {
for (var j = 0; j < alist.length; j++) {
if (alist[j] == this) {
this.style.backgroundColor = '#ccc';
acon[j].style.display = 'block';
} else {
alist[j].style.backgroundColor = '#aaa';
acon[j].style.display = 'none';
}
}
}
}
- 利用ES6的方法来解决（部分浏览器不支持ES6语法）
for循环中，var新建的i是一个全局变量，所以系统只会创建一个i，而这个i会根据for循环的增加而改变，则i从循环结束之后就会变成3，而let则会在你每次循环的时候新建一个i，从而让i不会被污染。
for (let i = 0; i < alist.length; i++) {
alist[i].onmouseover = function () {
for (var j = 0; j < alist.length; j++) {
alist[j].style.backgroundColor = '#aaa';
acon[j].style.display = 'none';
}
this.style.backgroundColor = '#ccc';
acon[i].style.display = 'block';
}
}
- 利用闭包来解决问题
添加事件的时候，都将i的值传给change事件，在change事件中又返回一个fn的方法，由于fn的方法中使用到change事件中的index，也就是我们传过去的i值，从而使得函数不会被垃圾回收机制回收，就像上面闭包的作用中所讲到的一样。
for (var i = 0; i < alist.length; i++) {
function change(index) {
function fn() {
for (var j = 0; j < alist.length; j++) {
alist[j].style.backgroundColor = '#aaa';
acon[j].style.display = 'none';
}
alist[index].style.backgroundColor = '#ccc';
acon[index].style.display = 'block';
}
return fn;
}
alist[i].onmouseover = change(i);
}
简化上面的方法，将方法中的change改为匿名函数
for (var i = 0; i < alist.length; i++) {
alist[i].onmouseover = (function (i) {
function fn() {
for (var j = 0; j < alist.length; j++) {
alist[j].style.backgroundColor = '#aaa';
acon[j].style.display = 'none';
}
alist[i].style.backgroundColor = '#ccc';
acon[i].style.display = 'block';
}
return fn;
})(i);
}
进一步简化，直接return fn的方法
for (var i = 0; i < alist.length; i++) {
alist[i].onmouseover = (function (i) {
return function fn() {
for (var j = 0; j < alist.length; j++) {
alist[j].style.backgroundColor = '#aaa';
acon[j].style.display = 'none';
}
alist[i].style.backgroundColor = '#ccc';
acon[i].style.display = 'block';
}
})(i);
}
再次简化，将方法全部改为匿名函数
for (var i = 0; i < alist.length; i++) {
(function (i) {
alist[i].onmouseover = function () {
for (var j = 0; j < alist.length; j++) {
alist[j].style.backgroundColor = '#aaa';
acon[j].style.display = 'none';
}
this.style.backgroundColor = '#ccc';
acon[i].style.display = 'block';
}
})(i);
}
By : Yimi-shan
网友评论