Javascript的闭包(上)

了解了预编译和作用域的相关知识以后我们来看一下开发中常见的工具——闭包。还是来看一个实例。

 function a(){
        function b() {
            var bb=234;
            console.log(aa);
        }
        var aa=123;
        return b;
    }
    var dome = a();
    dome();

我们来看一下上边的实例,首先我们在全局中定义了一个a函数,定义了一个变量dome等于a函数的执行。a执行就会产生一个自己执行期上下文(AO,activation object),存在作用域链的最顶端。a函数的执行产生了b函数的定义。所以b函数定义拿到a函数的AO。再往下看,并没有b函数的执行,它一直等着被执行,b函数现在的[[scope]]对象和a函数执行时的[[scope]]对象是一样的。如下图所示:

                                   

将上边两个图合成一个图:

当return b;语句执行完之后,a函数才算是执行完。既然a函数执行完了,a.[[scope]]中的AO就会被释放。但是在释放之前发生了一件惊天动地的事情。它把b函数保存到了外部去了。由全局变量dome来接收。这时候dome就是b函数,b函数就被保存到了外部,此时a函数执行完毕。a函数虽然释放了自己的AO,但是b函数还拿着a函数的AO。

注意:函数执行完之后并不意味着它的AO被破坏了,而是[[scope]]与AO的关联关系断了。如下图所示:

接着我们执行dome,也就是b,b函数是在a函数内部生成,而在全局被执行,我们看会发生什么?

首先b函数还是生成自己的AO放在作用域链的最顶端。如下图所示:

从视觉的角度上看好像是在b函数中访问不到aa变量,但其实在b函数中执行到console.log(aa); 系统就会沿着作用域链的最顶端去找变量aa,查找第0位b函数的AO中,没有aa,继续向下找,第一位a函数的AO中找到了aa:123,所以打印结果就为123。

像以上这种内部的函数被保存在了外部这个过程就是闭包。我们初步的认识了闭包可以自己思考一下下边的代码执行结果:

function a(){
        var num = 100;
        function b() {
            num++;
            console.log(num);
        }
        return b;
    }
    var dome = a();
    dome();
    dome();

猜你喜欢

转载自www.cnblogs.com/daimaxiaocai/p/11976253.html