彻底搞懂JS闭包各种坑

闭包是js开发惯用的技巧，什么是闭包？

    闭包就是 能够访问另一个函数作用域的变量的函数

    function f1( ){ 

            let a = 2;

            function f2(){

                console.log(a)

            }

            return f2;

    }

    f1();

由此可以看出函数f2可以访问到f1的变量，所以我们就说f2是一个闭包函数，

从堆栈的角度看js函数

    基本数据类型都存储在占内存中，而对象类型的值存储在堆内存中，占内存只存储对应的空间地址

    基本数据类型：Number、String、Boolean、Null、Undefined

对应的存储关系

        

当我们执行 b = {m: 30} 的时候，堆内就有了新的对象 {m : 30}，栈内的b就会指向 {m : 30}

而堆内原有的 {m : 20} 会被程序引擎回首掉，节约内存空间。

    let a1 = 1;

    function fn1(){

        let a2 = 2;

        function fn2(){

            console.log(a2)

        }

        fn2()

    }

    fn1()

栈

    fn2的执行环境

                变量                 值

                            无

     fn1的执行环境

                变量                 值

                a2                    2

                fn2                   引用地址

        全局执行环境

                 变量                 值

                   a1                    1

                    fn1                    引用地址

栈是一个先进后出的数据结构

1、在进入fn1前，此时处在全局环境下即window作用域下，在全局作用域下有一个变量a1

2、进入fn1，此时栈内就会push一个fn1的运行环境，在这个环境里有一个变量a2和函数对象    fn2，这里可以访问到自身执行环境和全局变量

3、进入fn2，此时栈内就会push一个fn2的运行环境，这里没有定义任何变量，但是在这里可以访问到fn1和全局环境下的变量，因为程序在访问变量时，是向底层栈一个个找，如果找到全局执行环境里都没有对应变量，则程序抛出underfined的错误。

4、随着fn2()执行完毕，fn2的执行环境被杯销毁，接着执行完fn1()，fn1的执行环境也会被销毁，只剩全局的执行环境下，现在没有a2变量，和fn2函数对象了，只有a1 和 fn1(函数声明作用域是window下)

在函数内访问某个变量是根据函数作用域链来判断是否存在的，而函数作用域连是程序根据函数所在的执行环境栈来初始化的

当程序调用某个函数时：准备执行环境，初始化函数作用域链和arguments参数对象

坑点1： 引用的变量可能发生变化

functionouter(){

varresult = [];

for（vari =0； i<10; i++）{

 result.[i] =function(){

console.info(i) 

 } }

return result

}

看样子result每个闭包函数对打印对应数字，1,2,3,4,...,10, 实际不是，因为每个闭包函数访问变量i是outer执行环境下的变量i，随着循环的结束，i已经变成10了，所以执行每个闭包函数，结果打印10， 10， ..., 10

解决：

functionouter(){

    varresult = [];

    for（vari =0； i<10; i++）{ 

     result.[i] =function(num){

        return function(){

            console.info(num);// 此时访问的num，是上层函数执行环境的num，数组有10个函数对象，每个对象的执行环境下的number都不一样} }(i)

     }     

            return result

}

坑点2: this指向问题

var object = { 

 name:''object"，

    getName： function() {

        return function() {

            console.info(this.name)

        }

    }

}

object.getName()()    // underfined

// 因为里面的闭包函数是在window作用域下执行的，也就是说，this指向windows

坑点3：内存泄露问题

function showId(){

    varel =document.getElementById("app") 

     el.onclick =function(){

     aler(el.id)    // 这样会导致闭包引用外层的el，当执行完showId后，el无法释放

    }}

    // 改成下面

    function showId(){

    varel =document.getElementById("app")

    var    id = el.id 

     el.onclick =function(){ 

         aler(id)// 这样会导致闭包引用外层的el，当执行完showId后，el无法释放

    } 

     el =null    // 主动释放el

}

技巧1： 用闭包解决递归调用问题

function    factorial(num){

    if(num<=1) {

        return1; 

     }    else    {

        return    num * factorial(num-1) 

     }

    }

    var    anotherFactorial = factorial    

    factorial =null

    anotherFactorial(4)// 报错 ，因为最好是return num* arguments.callee（num-1），arguments.callee指向当前执行函数，但是在严格模式下不能使用该属性也会报错，所以借助闭包来实现

// 使用闭包实现递归

function    newFactorial= （functionf(num){

    if(num<1) {

        return1

    }else{

        returnnum* f(num-1) 

     }}）//这样就没有问题了，实际上起作用的是闭包函数f，而不是外面的函数newFactorial