作用域链和闭包

2017-07-25  本文已影响0人  snow_in

1、先理解一下作用域

如果我们初始化一个变量,比如:var a = 1;参与这段代码执行的几个角色包括:

引擎:从头到尾负责整个JavaScript程序的编译和执行

编译器:负责词法分析、语法分析及代码生成等任务

作用域:负责收集并维护由所有声明的标识符(变量)组成的一系列查询,并实施一套非常严格的规则,确定当前执行的代码对这些标识符的访问权限

对于var a = 1;这段程序,引擎认为这里有两个完全不同的声明,一个在编译器编译时处理,另一个在引擎运行时处理。

首先编译器会将这段程序分解为词法单元,然后将词法单元解析成一个树结构,在代码生成阶段进行如下处理:

1.遇到var a,编译器会先询问作用域中是否已经存在该名称的变量,如果是,会忽略该声明继续编译;如果否,会要求作用域在当前作用域集合中声明一个名为a的变量。

2.之后编译器会为引擎生成在运行时需要的代码,这些代码用来处理a = 2这个赋值操作。引擎运行时先问作用域是否有改变量,如果有则使用,如果没有,则向上一级作用域中查找。

如果引擎最终找到了a,就把1赋值给它,如果没有,就会抛出异常。

总结:变量的赋值操作会执行两个动作,首先编译器会在当前作用域中声明一个变量,然后在运行时引擎会查找该变量,如果有则对它赋值。

作用域是根据名称查找变量的一套规则,而作用域链是这套规则的具体实现

2、作用域链

作用域链在执行上下文的创建阶段生成,是由当前环境以及上层环境的一系列变量对象组成。它的作用是保证对执行环境有权访问的所有变量和函数的有序访问。

标识符的解析是沿着作用域链一级一级向上查找作用域的过程,查找始终从作用域开始,找到则停止,否则一直向上查找,知道全局作用域,即作用域链的末尾。

通过一个例子理解一下:

var color = "blur";

function changeColor() {

    var anotherColor = "red";

    function swapColor() {   

        var tempColor = anotherColor;

        anotherColor = color;

        color = tempColor;

    }

}

以上代码共涉及三个执行环境:全局环境、changeColor的局部环境和swapColor的局部环境。通过图来展示作用域链:

内部环境可以通过作用域链访问所有外部环境中的变量和函数,但是外部环境不能访问内部环境。

闭包跟作用域链息息相关,下面就来介绍一下闭包。

3、闭包

闭包的概念:当函数可以记住并访问所在的作用域(全局作用域除外)时,就产生了闭包,即使函数是在当前作用域之外执行的。简单来说,就是一个函数中又声明了一个函数,就产生了闭包。

function changeColor() {

    var anotherColor = "red";

    function swapColor() {

        console.log(anotherColor);

    }

    return swapColor;

}

var fn = changeColor();

这样代码执行时,就把swapColor的引用复制给了全局变量fn,而函数的执行上下文,在执行完毕生命周期结束之后,执行上下文就会失去引用,进而其占用的内存空间被垃圾回收器释放。但是闭包的存在,打破了这种现象,因为swapColor的引用并没有被释放。所以闭包很容易造成内存泄漏的问题。

如何让下面的代码输出1,2,3,4,5

for(vari=1;i<=5;i++){

setTimeout(functiontimer(){

console.log(i);

},0);

}

1. 使用中间变量承接一下

function fn(i) {

console.log(i);

}

for (var i=1; i<=5; i++) {

setTimeout( fn(i), 0 );

}

通过传入实参缓存循环的数据,并且setTimeout的第一个参数是立即执行的函数,不执行不可以。

2、使用立即执行函数

for (var i=1; i<=5; i++) {

setTimeout( (function timer() {

console.log(i);

})(), 0 );

}

3、用let或const声明

for (let i=1; i<=5; i++) {

setTimeout( function timer() {

console.log(i);

}, 0 );

}

这个问题的主要原因是因为执行到setTimeOut时函数没有执行,而是把它放到了任务队列中,等到for循环结束后再执行。所以i最后都变成了5。

循环中的事件也会有这个问题,因为事件需要触发,大多数时候事件触发的时候循环已经执行完了,所以循环相关的变量就变成了最后一次的值。

上一篇下一篇

猜你喜欢

热点阅读