彻底理解js中的闭包

闭包是js的一个难点也是它的一个特色，是我们必须掌握的js高级特性。


我们都知道，js的作用域分两种，全局和局部，基于我们所熟悉的作用域链相关知识，我们知道在js作用域环境中访问变量的权利是由内向外的，内部作用域可以获得当前作用域下的变量并且可以获得当前包含当前作用域的外层作用域下的变量，反之则不能，也就是说在外层作用域下无法获取内层作用域下的变量，同样在不同的函数作用域中也是不能相互访问彼此变量的，那么我们想在一个函数内部也有限权访问另一个函数内部的变量该怎么办呢？闭包就是用来解决这一需求的，闭包的本质就是在一个函数内部创建另一个函数。

我们首先知道闭包有3个特性：

①函数嵌套函数

②函数内部可以引用函数外部的参数和变量

③参数和变量不会被垃圾回收机制回收

例子:

在这段代码中，a()中的返回值是一个匿名函数，这个函数在a()作用域内部，所以它可以获取a()作用域下变量name的值，将这个值作为返回值赋给全局作用域下的变量b,实现了在全局变量下获取到局部变量中的变量的值

一般情况下，在函数fn执行完后，就应该连同它里面的变量一同被销毁，但是在这个例子中，匿名函数作为fn的返回值被赋值给了fn1，这时候相当于fn1=function(){var n = 0 … }，并且匿名函数内部引用着fn里的变量num，所以变量num无法被销毁，而变量n是每次被调用时新创建的，所以每次fn1执行完后它就把属于自己的变量连同自己一起销毁，于是乎最后就剩下孤零零的num，于是这里就产生了内存消耗的问

再来看一个经典例子-定时器与闭包

一次打出:

定时器间隔打出:
代码

 for (var i = 0; i < 5; i++) {
        (function (i) {
            setTimeout(function () {
                console.log(i + 1)
            }, (i + 1) * 500)
        })(i)
    }

加粗样式动态为li元素创建点击事件:

<ul id="uu">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>


<script>
    let li = document.getElementsByTagName('li')

    for (var i = 0; i < li.length; i++) {
        (function (i) {
            li[i].onclick = function () {
                console.log(i)
            }
        })(i)
    }
<script/>

 /**
     * 打印点击打印相对应的位置索引
     */