深入理解 js 声明提升( 尾部有总结 和 面试题解析 )

javaScript自上而下执行的顺序受到很多新手和部分老手的共识，但是这其实并不完全正确，这涉及到js的编译过程，这方面我们稍后会聊到，先考虑下面代码：

window.onload = function(){
    xxx.onclick = fn;
};
function fn() {...}

在你的代码中是否存在过类似这种写法，如果完全的自上而下成立，那么这么写应该存在错误，你可能会说，onload函数在页面加载完毕后才执行，js先加载了下面的代码所以不会有问题。

然而其实onload也只是函数，只是函数触发的时间和一般的函数不同，本质上和普通函数没有区别，编译器依然会加载并该报错依然会报错，这个问题的本质是 “ 函数的提升 ” 。

要理解函数的“提升”行为，让我们先解析什么是js的“提升”。

1. 提升

js的代码在生成前，会先对代码进行编译，编译的一部分工作就是找到所有的声明，然后建立作用域将其关联起来，因此，在 当前作用域内 包括变量和函数在内的所有声明都会在任何代码被执行前首先被处理。

注意这里是“声明”会被提前处理，赋值并没有， 定义声明是在编译阶段进行的，而赋值是在执行阶段进行的 。也就是说 声明提升了，赋值还留着原地，等待执行。

2. 变量提升

考虑下面代码，猜想输出结果:

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

等价于

 var a ;         // a的默认值undefined
 console.log(a); // undefined
 a = 2;

这里就用到了我们上面的结论 声明提升了，赋值还留着原地。

2.1. 函数表达式

 a();     //typeError a不是函数
 var a = function(){...};

函数表达式的提升 === 变量提升 (区别就是赋值变量的类型) ，但是名字比较迷糊人，容易和我们马上要说的函数提升混淆。

一个简单的方法判断是函数表达式还是函数 : function关键字如果是整个声明的第一个词，那么就是函数，否则就是函数表达式，例如：

console.log(a); // ReferenceError  a is not defined
+function a(){ console.log(1); } //function不是第一个词

3. 函数提升

函数提升和变量提升都会被提升，但是有一个比较重要的细节，函数提升的优先级最高，将首先被提升。

考虑如下代码:

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

等价于

var foo ;  //重复的声明将被忽略
function foo(){ console.log(1); }

foo(); //1

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

foo(); //2

4.总结

1. 无论声明出现在作用域的什么位置，都会被移动到各自作用域的顶部，这个过程被称为提升。

2. 声明被提升，而包括函数表达式的赋值在内的赋值操作并不会提升，而是留在原地等待执行。

5.面试题解析

( 题尾答案+详细解析 )

选择了网上三题‘较’难，迷惑的人较多的面试题：

1.

console.log(foo);     // ?
console.log(bar);     // ?

var foo = function(){...}; 
function bar(){...} 

---

===============================================================
==============================解析=============================

答案 ： undefined ，function bar(){...}

详解：

var foo ;
function bar(){...} 

console.log(foo);    // undefined 
console.log(bar);    // function bar(){...}

foo = function(){...}; 

上面的代码就很容易理解了，本题主要考的是函数和函数表达式的区别。
变量声明和函数先提升到顶部，赋值被留到原地，foo默认undefined。bar输出函数自己。

2.

function foo(){
    a = 5;
    console.log(window.a);  //  ?
    console.log(a);         //  ?
    var a = 10;
    console.log(a);         //  ?
}
foo();

---

===============================================================
==============================解析=============================

答案 ：undefined ，5 ，10

详解：

这里涉及到全局污染问题，即不使用 var 或 其他声明关键字 去声明时，在本作用域找不到声明时，默认向上级找，直到最顶层绑定到全局window上（严格模式报 not defined ）。例如:

function foo(){
    a = 1;
    console.log(window.a);    // 1 变量a污染到了全局上
}
foo();

下面是本题的解析，考点就是提升和全局污染

function foo(){
    var a ;                   // 因为下面有声明a变量,a的声明提前
    a = 5;                    //因为在自己的作用域内有a的声明存在,a并不会污染到全局,
                              //而是绑定到本作用域的a上，这也是比较忽悠人的地方
    console.log(window.a);    // undefined 
                              //a = 5 没有污染全局，所以window.a不存在,故输出undefined
    console.log(a);           // 5 ,a 的声明提升，变量 a = 10 没有提升，a 现在还是 5
    a = 10;
    console.log(a);           // 10
}
foo();

3.

function foo() {
   var a = 1;        
   function b() {   
      a = 10;
      return '';
      function a() {...}
    }
    b();
    console.log(a);         // ?
}
foo();

---

===============================================================
==============================解析=============================

答案 ：1

详解 ： 考点 1.污染 2.提升 3.作用域

function foo() {
    var a ;                    // a 和 b 一起提升到作用域顶部
    
    function b() {
      function a() {...}      //b里的函数a也提升到b的顶部
      a = 10;                 //因为上面有变量a，所以a也不会污染到上一层，而是对函数a进行再次赋值
                              //如果函数执行，函数里的a的值是 10，且没有污染
      return '';
    }
    
    a = 1;                    //对本作用域的a赋值
    
    b();                      //函数执行,b作用域内的a被赋值为10
    console.log(a);           // 1
                              // 这个有两点要搞清楚 :
                              // 1. b的a没有污染到这个作用域
                              // 2. 就近原则，本函数的log(a)找离自己最近的a变量，
                              //如果log在函数b内，那么输出 离自己最近的 10
}
foo();

---

---

---

参考书籍：你不知道的JavaScript<上卷> ＫＹＬＥ　ＳＩＭＰＳＯＮ　著　（推荐）