变量提升

什么是变量提升

顾名思义，变量提升指的是，在声明变量的时候，变量的声明位置会被提升至当前作用域最前面。
看这个例子

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 就会出现不同的数字了。