闭包及作用域的问题

2017-06-17 本文已影响94人 yimi珊

前言

前几天看了一篇关于闭包的文章，才想起还有闭包这东西，好久没有用到，都快把它忘记了。
于是才复习一下，记下这文章，本文主要说明：

闭包
闭包的作用
利用闭包解决作用域问题的几种方法

闭包

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

闭包及作用域的问题

前言

闭包

闭包的作用

利用闭包解决作用域问题的几种方法

作用域产生的问题

几种解决方法

猜你喜欢

热点阅读