JavaScript 中的 Hoisting 机制

JavaScript 中的 Hoisting 一般称之为变量声明提升机制。就是说，JavaScript 引擎在执行的时候，会把所有变量的声明都会被提升到当前作用域的最前面，注意，这里被提升的仅仅是声明。怎么理解呢，看下面例子：

var myval = "my global var";
(function() {
    console.log(myval); // log "my global var"
})();

以上代码很显然会输出 "my global var"，但是如果我们把以上代码按如下方式稍加修改：

var myval = "my global var";
(function() {
    console.log(myval); // log "undefined"
    var myval = "my local var";
})();

执行结果是输出了一个 undefined，出现这个结果的原因就是变量的声明被提升了，以上代码等同如下：

var myval = "my global var";
(function() {
    var myval;
    console.log(myval); // log "undefined"
    myval = "my local var";
})();

被提升的仅仅是变量的声明部分，并没有立即初始化，所以会输出 undefined。

然而这种提升机制，不仅仅表现于在普通的变量，同时也表现在函数上。例如下面这段代码并不能被正确执行：

(function() {
    fun(); // Uncaught TypeError: undefined is not a function
    var fun = function() {
        console.log("Hello!");
    }
})();

因为它等价于：

(function() {
    var fun;
    fun(); // Uncaught TypeError: undefined is not a function
    fun = function() {
        console.log("Hello!");
    }
})();

因为函数的声明同样被提升而没有立即初始化，所以会出错。

当然，这种定义函数的方式称之为“函数表达式”，会有提升机制，如果是如下的这种“函数声明”方式，则完全没有提升机制方面的问题：

(function() {
    fun();
    function fun() {
        console.log("Hello!");  // log "Hello!"
    }
})();

这也是函数声明与函数表达式的主要区别。