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。
循环中的事件也会有这个问题，因为事件需要触发，大多数时候事件触发的时候循环已经执行完了，所以循环相关的变量就变成了最后一次的值。
网友评论