javaScript自上而下執(zhí)行的順序受到很多新手和部分老手的共識，但是這其實并不完全正確，這涉及到js的編譯過程，這方面我們稍后會聊到，先考慮下面代碼：
window.onload = function(){? ? xxx.onclick = fn;};function fn(){...}
在你的代碼中是否存在過類似這種寫法，如果完全的自上而下成立，那么這么寫應該存在錯誤，你可能會說，onload函數(shù)在頁面加載完畢后才執(zhí)行，js先加載了下面的代碼所以不會有問題。
然而其實onload也只是函數(shù)，只是函數(shù)觸發(fā)的時間和一般的函數(shù)不同，本質上和普通函數(shù)沒有區(qū)別，編譯器依然會加載并該報錯依然會報錯，這個問題的本質是 “ 函數(shù)的提升 ” 。
要理解函數(shù)的“提升”行為，讓我們先解析什么是js的“提升”。
1. 提升
js的代碼在生成前，會先對代碼進行編譯，編譯的一部分工作就是找到所有的聲明，然后建立作用域將其關聯(lián)起來，因此，在當前作用域內包括變量和函數(shù)在內的所有聲明都會在任何代碼被執(zhí)行前首先被處理。
注意這里是“聲明”會被提前處理，賦值并沒有，定義聲明是在編譯階段進行的，而賦值是在執(zhí)行階段進行的。也就是說聲明提升了，賦值還留著原地，等待執(zhí)行。
2. 變量提升
考慮下面代碼，猜想輸出結果:
console.log(a);var a =2;
等價于
vara ;// a的默認值undefinedconsole.log(a);// undefineda =2;
這里就用到了我們上面的結論聲明提升了，賦值還留著原地。
2.1. 函數(shù)表達式
a();? ? //typeError a不是函數(shù)vara = function(){...};
函數(shù)表達式的提升 === 變量提升(區(qū)別就是賦值變量的類型) ，但是名字比較迷糊人，容易和我們馬上要說的函數(shù)提升混淆。
一個簡單的方法判斷是函數(shù)表達式還是函數(shù) :function關鍵字如果是整個聲明的第一個詞，那么就是函數(shù)，否則就是函數(shù)表達式，例如：
console.log(a);// ReferenceError? a is not defined+functiona(){console.log(1); }//function不是第一個詞
3. 函數(shù)提升
函數(shù)提升和變量提升都會被提升，但是有一個比較重要的細節(jié)，函數(shù)提升的優(yōu)先級最高，將首先被提升。
考慮如下代碼:
foo();functionfoo(){console.log(1); }varfoo =function(){console.log(2); }foo();
等價于
varfoo ;//重復的聲明將被忽略functionfoo(){ console.log(1); }foo();//1foo =function(){ console.log(2); }foo();//2
4.總結
1.無論聲明出現(xiàn)在作用域的什么位置，都會被移動到各自作用域的頂部，這個過程被稱為提升。2.聲明被提升，而包括函數(shù)表達式的賦值在內的賦值操作并不會提升，而是留在原地等待執(zhí)行。
5.面試題解析
( 題尾答案+詳細解析 )
選擇了網上三題‘較’難，迷惑的人較多的面試題：
1.
console.log(foo);? ? // ?console.log(bar);? ? // ?varfoo = function(){...}; function bar(){...}
===============================================================
==============================解析=============================
答案 ： undefined ，function bar(){...}
詳解：
varfoo ;function bar(){...}console.log(foo);? ? // undefined console.log(bar);? ? // function bar(){...}foo = function(){...};
上面的代碼就很容易理解了，本題主要考的是函數(shù)和函數(shù)表達式的區(qū)別。
變量聲明和函數(shù)先提升到頂部，賦值被留到原地，foo默認undefined。bar輸出函數(shù)自己。
2.
functionfoo(){? ? a =5;console.log(window.a);//? ?console.log(a);//? ?vara =10;console.log(a);//? ?}foo();
===============================================================
==============================解析=============================
答案 ：undefined ，5 ，10
詳解：
這里涉及到全局污染問題，即不使用var或 其他聲明關鍵字 去聲明時，在本作用域找不到聲明時，默認向上級找，直到最頂層綁定到全局window上（嚴格模式綁定到undefined）。例如:
functionfoo(){
a = 1;
console.log(window.a);? ? // 1 變量a污染到了全局上
}foo();
下面是本題的解析，考點就是提升和全局污染
functionfoo(){vara ;// 因為下面有聲明a變量,a的聲明提前a =5;//因為在自己的作用域內有a的聲明存在,a并不會污染到全局,//而是綁定到本作用域的a上，這也是比較忽悠人的地方console.log(window.a);// undefined//a = 5 沒有污染全局，所以window.a不存在,故輸出undefinedconsole.log(a);// 5 ,a 的聲明提升，變量 a = 10 沒有提升，a 現(xiàn)在還是 5a =10;console.log(a);// 10}foo();
3.
functionfoo(){vara =1;functionb(){? ? ? ? a =10;return'';functiona(){...}? ? }? ? b();console.log(a);// ?}foo();
===============================================================
==============================解析=============================
答案 ：1
詳解 ： 考點 1.污染 2.提升 3.作用域
functionfoo(){vara ;// a 和 b 一起提升到作用域頂部functionb(){functiona(){...}//b里的函數(shù)a也提升到b的頂部a =10;//因為上面有變量a，所以a也不會污染到上一層，而是對函數(shù)a進行再次賦值//如果函數(shù)執(zhí)行，函數(shù)里的a的值是 10，且沒有污染return'';? ? }? ? ? ? a =1;//對本作用域的a賦值b();//函數(shù)執(zhí)行,b作用域內的a被賦值為10console.log(a);// 1// 這個有兩點要搞清楚 :// 1. b的a沒有污染到這個作用域// 2. 就近原則，本函數(shù)的log(a)找離自己最近的a變量，//如果log在函數(shù)b內，那么輸出 離自己最近的 10}foo();
參考書籍：你不知道的JavaScript<上卷> ＫＹＬＥ ＳＩＭＰＳＯＮ 著 （推薦）
##前端學習交流群：461593224
