JavaScript变量提升(Hoisting)

定义：函数声明和变量声明总是被JavaScript解释器隐式地提升(hoist)到包含他们的作用域的最顶端。

注意这里说的是变量或函数的'声明'会被提升到其作用域顶端
另一个需要注意的是作用域。我们知道Javascript中的作用域只有两种，一种是全局作用域，一种是函数作用域(局部作用域) 。是没有块级作用域等概念的。

下面我们根据这个定义来解释解释变量提升这个特性

首先来一段代码

var x = 'good';
(function () {
   console.log(x);
})();

看一下控制台的输出结果:

good

这一点应该都没问题吧！声明一个变量 x 并初始化，然后在匿名函数创建的局部作用域中输出这个 x。

那如果这样呢：

var x = 'good';
(function () {
   console.log(x);
   var x = 10; // 在这里添加一行对x的定义
})();

发现结果为：

undefined

我们脑补一下过程会觉着这段代码应该如同之前那段代码一样，在console.log的时候输出原有的 x 的值，而又在其下方重新定义一遍 x 才对，那么输出结果也应该和之前一样才对。为什么不一样呢！

这个时候就是变量提升在起作用了，变量提升的定义里说到变量的声明会被提升到其作用域最前端。
那就是说我们在这段代码最后一行的var x = 10 被隐式的做出了调整，var x实际上被提升到了这段代码所在作用域（也就是这个匿名函数定义的作用域）的最前面，那就相当于这样一段代码：

var x = 'good';
(function () {
   var x; // 变量声明被隐式提升
   console.log(x);
   x = 10; 
})();

如果是这样一段代码的话，那就很好解释了，其 x 在匿名函数定义的作用域中声明以后覆盖了全局作用域中的 x ，而这个 x 在这样一段代码里仅仅是声明有这个 x ，还没赋值，就被 console.log 掉了，自然输出结果是 undefined 咯。
那对于函数提升呢！我们可以用这样一段代码来理解：

func();

function func() {
    console.log('nice');
}

输出结果：

nice

这段代码中呢函数的调用时在函数的定义之前。如果按照javascript的规矩，其代码是按其先后顺序一行一行的执行的话，那么在 func() 做出函数调用的动作的时候，其前面是没有任何关于func 这一函数的定义的。
这里之所以能正确调用这个 func 函数，也是由于在整个javascript代码执行前，其中的函数声明被提升到了其作用域的最前面，这样的话在调用func() 函数的时候自然能正确执行而不会出错。

那以后遇到这样的代码 :

(function() {
    var x = 10;
    var y = 'haha';
    var z = 13.6;
})()

那不就是相当于是

(function() {
    var x, y, z; // javascript的变量提升机制
    x = 10;
    y = 'haha';
    z = 13.6;
})()

这个特性在书写javaScript代码的时候需要多多注意，最好将变量声明一类的东西就直接写在其作用域的最开头，这样就不会引发一些不必要的错误。

JavaScript变量提升(Hoisting)

猜你喜欢