你不知道的提拔 - 先有鸡照样先有蛋？

2019年8月31日 272次阅读 来源: dodomonster

一、先有鸡另有先有蛋？

直觉上会以为javascript代码在实行时是由上到下一行一行实行的。但现实上这并不完全准确，有一种特殊情况会致使这个假设是毛病的。

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

人人以为console.log(…)会输出什么呢？
许多开发者会以为是undefined，因为var a声明在a = 2以后，他们自然而然地以为变量被从新复制了，因而会被给予默认值undefined。然则，真正的输出结果是2。

斟酌另一段代码：

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

鉴于上一个代码片断所表现出来的某种自上而下的行动特性，你能够会以为这个代码段也会有一样的行动而输出2.另有人能够以为，因为变量a在运用前没有先举行声明因而会抛出ReferenceError异常。
不幸的是两种猜想都是不对的。输出的结果是undefined。

那末究竟发生了什么？看起来我们面临的是一个先有鸡照样先有蛋的题目，究竟是声明（蛋）在前，照样赋值（鸡）在前？

你须要晓得的编译器

引擎会再诠释javascript代码之前起首对其举行编译。在编译阶段中的一部份事情就是找到一切的声明，并用适宜的作用域将它们关联起来。
因而，准确的思索思绪是，包括变量和函数在内的一切声明都邑在任何代码被实行前起首被处置惩罚。

当你看到var a = 2;时，能够会以为这是一个声明，但Javascript现实上会将其算作两个声明：var a 和 a = 2;第一个定义声明是在编译阶段举行的。第二个赋值声明会被留在原地守候实行阶段

第一个代码片断会以以下情势举行处置惩罚：

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

个中第一部份是编译，而第二部份是实行。
类似地，我们的第二个代码片断现实是根据以下流程处置惩罚的：

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

因而，打个比如，这个历程就好像变量和函数声明从它们在代码中涌现的位置被“挪动”到了最上面。这个历程就叫作提拔。
换句话说，我们的题目“先有鸡照样先有蛋”的结论是：先有蛋（声明）后有鸡（赋值）。

只要声明本身会被提拔，而赋值或其他运转逻辑会留在原地。假如提拔转变了代码实行的递次，会形成异常严峻的损坏。

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

foo函数的声明（在这个例子还包括现实函数的隐含值）被提拔了，因而第一行中的挪用能够一般实行。

别的值得注重的是，每一个作用域都邑举行提拔操纵 。只管前面大部份的代码片断已简化了（因为它们只包括全局作用域），而我们正在议论的foo(…)函数本身也会在内部对var a举行提拔（明显并非提拔到了全部顺序的最上方 ）。因而这段代码现实上会被理解为下面的情势：

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

能够看到，函数声明会被提拔，然则函数表达式却不会被提拔。

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

这段顺序中的变量标识符foo()被提拔并分配给地点作用域（在这里是全局作用域），因而foo()不会致使ReferenceError。然则foo此时并没有赋值（假如它是一个函数声明二不是函数表达式，那末就会赋值）。

foo()因为对undefined值举行函数挪用而致使非法操纵因而抛出TypeError异常。

同时也要记着，即使是签字的函数表达式，称号标识符在赋值之前也没法在地点作用域中运用

foo();//TypeError
bar();//ReferenceError
var foo = function(){
    //...
}

这个代码片断经由提拔后，现实上会被理解为以下情势：

var foo;
foo();//TypeError
bar();//ReferenceError
foo = function(){
    //...
}

函数优先

函数声明和变量声明都邑被提拔。然则一个值得注重的细节（这个细节能够涌现在有多个“反复”声明的代码中）是函数会起首被提拔，然后才是变量
斟酌以下代码：

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

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

会输出1二不是2！这个代码片断会被引擎理解为以下情势：

function foo(){
    console.log(1);
}
foo();//1
foo = function(){
    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("a"); } 
}

然则须要注重这个行动并不牢靠，在javascript将来的版本中有能够发生转变，因而应当尽量防止在块内部声明函数。

小结

我们习气将var a = 2;看做一个声明，而现实上Javascript引擎并不这么以为。它将var a和a = 2看成两个零丁的声明，第一个是编译阶段的使命，而第二个则是实行阶段的使命。

这意味着不管作用域中的声明涌现在什么地方，都将在代码本身被实行前起首举行处置惩罚。能够将这个历程抽象地设想成一切的声明（变量和函数）都邑被“挪动”到各自作用域的最顶端，这个历程被称为提拔。

声明本身会被提拔，而包括函数表达式的赋值在内的赋值操纵并不会提拔。
要注重防止反复声明，特别是当一般的var 声明和函数声明夹杂在一起的时刻，不然会引起许多风险的题目！

道谢

《你不晓得的Javascript 上卷》

    原文作者：dodomonster
    原文地址: https://segmentfault.com/a/1190000007250472
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞