JavaScript笔记：提升

痛定思痛。 2022-07-16 06:40 68阅读 0赞

函数作用域和块作用域的行为是一样的，可以总结为：任何声明在某个作用域内的变量，都将附属于这个作用域。

但是作用域同其中的变量声明出现的位置有某种微妙的联系，而这个细节正是我们将要讨论的内容。

## 提升 ##

直觉上会认为 JavaScript 代码在执行时是由上到下一行一行执行的。但实际上这并不完全正确，有一种特殊情况会导致这个假设是错误的。

引擎会在解释 JavaScript 代码之前首先对其进行编译。编译阶段中的一部分工作就是找到所有的声明，并用合适的作用域将它们关联起来。

因此，正确的思考思路是，包括变量和函数在内的所有声明都会在任何代码被执行前首先被处理。

console.log( a ); //undefined
    var a = 2;

只有声明本身会被提升，而赋值或其他运行逻辑会留在原地。如果提升改变了代码执行的顺序，会造成非常严重的破坏。

foo();
    function foo() { 
        console.log( a ); // undefined 
        var a = 2;
    }

foo 函数的声明(这个例子还包括实际函数的隐含值)被提升了，因此第一行中的调用可以正常执行。

另外值得注意的是，每个作用域都会进行提升操作。尽管前面大部分的代码片段已经简化了(因为它们只包含全局作用域)，而我们正在讨论的 foo(..) 函数自身也会在内部对 `var a` 进行提升(显然并不是提升到了整个程序的最上方)。

注意，函数声明会被提升，但是函数表达式却不会被提升。

foo(); // 不是 ReferenceError, 而是 TypeError!
    var foo = function bar() { // ...
    };

这段程序中的变量标识符 foo() 被提升并分配给所在作用域(在这里是全局作用域)，因此 foo() 不会导致 ReferenceError。但是 foo 此时并没有赋值(如果它是一个函数声明而不是函数表达式，那么就会赋值)。foo() 由于对 undefined 值进行函数调用而导致非法操作， 因此抛出 TypeError 异常。

## 函数优先 ##

函数声明和变量声明都会被提升。但是一个值得注意的细节(这个细节可以出现在有多个“重复”声明的代码中)是函数会首先被提升，然后才是变量。

foo(); // 1
    var foo;
    function foo() {  
        console.log( 1 );
    }
    foo = function() {  
        console.log( 2 );
    };

这个代码片段会被引擎理解为如下形式:

function foo() { console.log( 1 ); } foo(); // 1
    foo = function() { console.log( 2 ); };

注意，`var foo`尽管出现在`function foo()...`的声明之前，但它是重复的声明(因此被忽略了)，因为函数声明会被提升到普通变量之前。

尽管重复的 var 声明会被忽略掉，但出现在后面的函数声明还是可以覆盖前面的。

foo(); // 3
    function foo() {  
        console.log( 1 );
    }
    var foo = function() {  
        console.log( 2 );
    };
    function foo() {  
        console.log( 3 );
    }

一个普通块内部的函数声明通常会被提升到所在作用域的顶部，这个过程不会像下面的代码暗示的那样可以被条件判断所控制：

foo(); // "b"
    var a = true; 
    if (a) {
        function foo() {  console.log("a"); } 
    }else {
        function foo() {  console.log("b"); }
    }