深刻理解 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<上卷> ＫＹＬＥ　ＳＩＭＰＳＯＮ　著　（推荐）