浅析关于 JS 作用域的几个高频知识点
闭包 词法作用域 变量提升
变量提升
什么是变量提升
顾名思义，变量提升指的是，在声明变量的时候，变量的声明位置会被提升至当前作用域最前面。
看这个例子
var foo = "before";
function bar() {
if (!foo) {
var foo = "after";
}
console.log(foo);
}
bar();
由于变量提升，这里输出的值为 "after"。
也就是说，上面的代码其实等价于下面的代码
var foo = "before";
function bar() {
var foo; // foo == undefined
if (!foo) { // 判断成立
foo = "after";
}
console.log(foo);
}
bar();
变量提升会提到哪里呢？在 js 里，只有函数级(function level)的作用域，所以上面代码中的 foo 被提到了函数的顶部。
如果上面没有函数，则作为全局变量。
为什么有变量提升
这是一个历史问题，Javascript 语言设计者为了实现相互递归定义，参考了《SICP》4.1.6 节中给出的解决方式，也就是变量提升。
Brendan Eich 的原话为
Function declaration hoisting is for mutual recursion & generally to avoid painful bottom-up ML-like order
那什么是相互递归定义呢？看下面这部分代码。
function is_even(n) {
if (n == 0) {
return true;
} else {
return is_odd(n - 1);
}
}
is_even(2); // true
function is_odd(n) {
if (n == 0) {
return false;
} else {
return is_even(n - 1);
}
}
is_odd 和 is_even 函数互相调用对方，按理说 is_even 定义的时候 is_odd 还没有定义，应该会报错，但由于有变量提升，所以就可以正常执行了。
词法作用域和闭包
先来看这样一段代码
var a = "before";
function foo(){
console.log(a);
}
function bar(fun){
var a = "after";
fun();
}
bar(foo);
输出结果为 "before"。
为什么不是根据“就近原则”选择变量 a 呢？
这是由于 JS 采用的是词法作用域 (lexical scoping)，又叫静态作用域 (static scoping)。
也就是说，变量的绑定在声明的时候就已经确定，而不是在执行的时候再根据上下文就近绑定。
上面的代码中，foo 在声明的时候就已经把 a 绑定为 "before" 了。
这种特性也被称为闭包。或者说，闭包是实现词法作用域的一种方式。
其实有些古老的语言的确采用动态作用域 (dynamic scoping) (所谓动态作用域就是在执行的时候才确立变量绑定)，比如 shell 脚本，emacslisp 等。
所以如果 JS 采用动态作用域，那么上面的代码将会输出 "after"。
let 和 var
上面我们提到，JS 只有函数级 (function level) 的作用域，这会导致什么问题呢？看下面这段代码。
<ul id="list">
</ul>
<script>
var list = document.getElementById("list");
for (var i = 1; i <= 5; i++) {
var item = document.createElement("li");
item.appendChild(document.createTextNode("Item " + i));
item.onclick = function(ev) {
alert("Item " + i + " is clicked.");
};
list.appendChild(item);
}
</script>
（上述代码的 JSFiddle 在线测试地址）
你会发现无论你点击哪个 Item，都只会显示 6。
其是这是由于 i 是在 for 循环中定义的，而不是在函数中定义的，所以它是全局变量，循环完毕之后只有一个 i ，其实此时所有的函数中的 i 都绑定到了那一个 i 上。
上述代码也可以简化为
var array = new Array();
for (var i = 1; i <= 5; i++) {
array[i] = function(){
return i;
}
}
array.forEach(function(fun){
console.log(fun());
})
为了解决这个问题，ES6 中引入了 let 关键字，它有块级(block level)作用域的性质。所谓块级作用域，也就是该变量的有效作用域以花括号 {} 作为边界。所以就不会提前到全局变量中了，而是以 for 循环的花括号作为边界了。
把上面的 var 定义改为 let 或者用一个函数包裹起来，那么点击各个 Item 就会出现不同的数字了。
