2019-11-22 seo達人
詳細解讀—函數和變量的聲明提升
一 - 聲明提升常見面試題
?我們先以幾道面試題開頭來引入，
?大家可以先給自己做出一個答案，然后再看文章的思路捋一捋喲。
來一道基礎的吧~
var a="Hello";
function test(){
alert(a);
var a="World";
alert(a);
}
test();
難度+1
var a = 1;
function outer(){
a = 2;
function inner(){
alert(a);
a = 4;
}
inner();
}
outer();
alert(a);
繼續加油
(function(){
f1();
f2();
var f1 = function(){};
function f2(){
alert(1);
}
})();
最后一道
(function () {
console.log(a);
var a=1;
function a() {
console.log("biu~");
}
})()
二 - 究竟什么是聲明提升？
引擎在解釋JS代碼之前，首先要對JS代碼進行編譯，其中編譯的一部分工作就是找到所有的聲明，包括變量和函數的所有聲明都會在任何代碼被執行前首先被處理。
var a = 1這句話會被瀏覽器讀成 var a和a = 1兩句話執行，其中var a會在編譯階段就先執行了，而a = 1這段賦值代碼會在原地等待執行階段。
console.log(a);
var a = 2;
上邊這段代碼，如果代碼按照順序由上自下執行，那么執行到console.log(a);時，a還沒有聲明,所以會包一個找不到變量a的錯，但是事實上，這句話打印了一個undefined，說明a被聲明了，但是沒有被賦值，那么結合上一段的文字，我們可以得出代碼實際運行的是這樣的：
var a;
console.log(a);
a = 2;
三 - 函數的提升
大家可能在書寫代碼的時候發現，無論函數封裝寫在前或者后，我們的函數調用都可以順利執行。
fn1();//可以執行
function fn1() {
console.log("hello");
}
為什么呢？其實函數聲明,包括函數的代碼塊都i會被提升，所以調用函數的時候，函數聲明已經被執行過了。
但是有個案例大家了解一下：
fn2();//報錯，fn2不是一個函數
var fn2 = function () {
console.log("world");
}
我們可以看到 以給匿名函數賦值的形式定義函數，只會提升函數聲明，但是函數表達式卻不會被提升。因為變量fn2被提升,但是并沒有賦值，我們書寫的fn2()無法運行，而拋出了異常。
以下就是實際執行的順序：
var fn2;
fn2();
fn2 = function () {
console.log("world")
}
函數優先提升
我們都知道了，函數聲明和變量聲明都會被提升，那么遇到這樣的情況會怎么辦？
fn3();
var fn3=function () {
console.log("fn3-1");
}
fn3();
function fn3() {
console.log("fn3-2");
}
哎呦，嘛情況，突然迷了?。?！
? 這個時候你就要考慮，同樣的一個變量名稱，到底是把var fn3給先提聲上去，再提升 fn3函數體？還是先提升 fn3函數體，再提升var fn3？？？其實都不對！??！
? 答案是：函數會被優先提升，但后才是變量提升，但是當函數提升后，然后發現還有一個變量聲明和函數聲明一樣的名稱，這個就是重復聲明，那么這個var fn3 是不生效直接忽略的。
所以實際代碼運行順序是：
function fn3() {
console.log("fn3-2");
}
fn3();//fn3-2
fn3=function () {//var fn3因為重復聲明被忽略
console.log("fn3-1");
}
fn3();//fn3-1
當然，我們還是建議再同一個作用域重復聲明是很爛的選擇
說在最后
再代碼作用域中的聲明，都會在代碼執行前被首先處理，所有的聲明都會被移動到各自作用域的最頂端，這個過程就叫做聲明提升。
四 - 答案：
問題1：
var a="Hello";
function test(){
alert(a);
var a="World";
alert(a);
}
test();
實際執行：
var a="Hello";
function test(){
//作用域有聲明a，聲明提升到這里
var a;
alert(a);//本作用域聲明a，所以不去使用父作用域的a，但是本作用域的a沒有賦值，所以彈出undefined
a="World";
alert(a);//賦值后 ，彈出world
}
test();
問題2：
var a = 1;
function outer(){
a = 2;
function inner(){
alert(a);
a = 4;
}
inner();
}
outer();
alert(a);
執行結果：
var a = 1;
function outer(){
a = 2;
function inner(){
//本作用域沒有聲明a，所以沒有任何提升，直接執行
alert(a); // 所以彈出 a為 2
a = 4;
}
inner();
}
outer();
alert(a);//只有全局聲明了a，所以所有作用域使用的都是全局的a，所以a最后被賦值為4 彈出4
問題3
(function(){
f1();
f2();
var f1 = function(){};
function f2(){
alert(1);
}
})();
實際執行結果：
(function(){
function f2(){
alert(1);
}
var fn1;
f1();//提升后先執行fn1(),但是fn1被提升的是變量不是函數，所以這里報錯，不是一個函數
f2();//上一句話報錯，這句話不再運行
f1 = function(){};
})();
問題4：
(function () {
console.log(a);
var a=1;
function a() {
console.log("biu~");
}
})()
實際執行結果：
(function () {
function a() {
console.log("biu~");
}
console.log(a);//打印了a這個函數的函數體
a=1;//因為函數有限聲明提升，所以這里的var a被提升時，發現重復聲明，故被忽略了var a；
})()