彻底搞懂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

你可能感兴趣的:(彻底搞懂JS闭包各种坑)