1 引例及基本原理

在學(xué)習(xí)JavaScript聲明提升之前，我們先看下面這個(gè)例子：

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

運(yùn)行結(jié)果會(huì)是什么？你可能會(huì)有以下的猜測(cè)：

1.報(bào)錯(cuò)ReferenceError: a is not defined；

2.打印2；

3.打印undefined。

正確的結(jié)果是第三種，打印undefined。

下面讓我們來(lái)看看具體的原因。其實(shí)，對(duì)于var a=2;這條語(yǔ)句，JavaScript會(huì)將其視為兩個(gè)聲明：

1. 定義聲明var a，會(huì)在編譯階段進(jìn)行；
2. 賦值聲明a=2，會(huì)留在原地等待執(zhí)行階段進(jìn)行。

而所謂的聲明提升：就是JavaScript會(huì)把var變量聲明和函數(shù)聲明都會(huì)被提升到各自作用域的頂部，而賦值操作并不會(huì)被提升。
因此，上面的例子實(shí)際是按照這樣的流程來(lái)處理：

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

我們還需要知道，不僅僅是var變量聲明會(huì)提升，函數(shù)聲明同樣也會(huì)提升，現(xiàn)在來(lái)看下面這個(gè)例子

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

這個(gè)例子的運(yùn)行結(jié)果為：打印undefined。這段代碼實(shí)際上會(huì)被理解為為下面的形式：

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

2 關(guān)于聲明提升的常見(jiàn)問(wèn)題

2.1 函數(shù)表達(dá)式

先看一個(gè)函數(shù)表達(dá)式的例子：

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

上面代碼的運(yùn)行結(jié)果為：打印undefined。實(shí)際上，變量標(biāo)識(shí)符foo被提升了，但它的賦值操作并沒(méi)有被提升，我們可以理解為下面的形式：

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

結(jié)論：函數(shù)聲明會(huì)被提升，但函數(shù)表達(dá)式不會(huì)被提升。

2.2 聲明的優(yōu)先級(jí)

如果在同一個(gè)作用域內(nèi)，存在同名的函數(shù)聲明和var變量聲明，那么會(huì)發(fā)生什么樣的情況呢？我們同樣再來(lái)看一個(gè)例子：

function a(){}
var a;
console.log(a);

var a;
function a(){}
console.log(a);

上面的兩種寫法，運(yùn)行結(jié)果均為打印a(){}。也就是說(shuō)，如果在同一個(gè)作用域內(nèi)，存在同名的函數(shù)聲明和var變量聲明，則函數(shù)聲明的優(yōu)先級(jí)更高。
還有一種情況：如果同一個(gè)作用域內(nèi)，存在多個(gè)同名的函數(shù)聲明。這種情況下，后面聲明的會(huì)覆蓋前面聲明的。

3 練習(xí)題

3.1 第一題

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

答案：打印1

解析：提升后的順序如下

var getName;//與函數(shù)聲明同名，故失效
function getName() {
 console.log(2);
}
getName = function() {//賦值
 console.log(1);
};
getName();

3.2 第二題

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

答案：打印1

解析：首先，我們需要梳理清楚聲明的提升。
本題有幾個(gè)關(guān)鍵點(diǎn)，我們需要明白：

函數(shù)b內(nèi)的a函數(shù)雖然在return之后，但它并沒(méi)有失效，它會(huì)發(fā)生聲明提升，從而提升到b函數(shù)作用域的頂部。

很多童鞋（比如我TAT）可能會(huì)錯(cuò)誤地認(rèn)為這題的答案是10，認(rèn)為我們?cè)谧詈笳{(diào)用了b函數(shù)，修改了全局變量a。實(shí)際上，由于函數(shù)a發(fā)生了聲明提升，導(dǎo)致在函數(shù)b內(nèi)“遮蔽”了全局作用域中的變量a，因此，a=10;其實(shí)是將函數(shù)a重新賦值。為了進(jìn)一步測(cè)驗(yàn)，大家可以把a(bǔ)函數(shù)注釋掉，會(huì)發(fā)現(xiàn)此時(shí)的答案就變成了10。

注：本題還涉及到了閉包的相關(guān)知識(shí)，這一題詳細(xì)的解析請(qǐng)見(jiàn)參考資料[2]，講得非常詳細(xì)。

var a;//全局變量a發(fā)生了聲明提升
function b(){
 function a(){//函數(shù)a發(fā)生聲明提升
   console.log(a);
  }
 a = 10;//因?yàn)楹瘮?shù)a離它最近，因此賦值給函數(shù)a
 return; 
}
a = 1;//賦值給了全局變量a
b();
console.log(a); 

4 參考資料

[1] 《你不知道的JavaScript》

[2] js中變量名與函數(shù)名重名的問(wèn)題，Charles_Tian

[3] 函數(shù)聲明與變量聲明的提升機(jī)制優(yōu)先級(jí)問(wèn)題，一個(gè)菜鳥(niǎo)的奮斗史

以上就是淺談JavaScript 聲明提升的詳細(xì)內(nèi)容，更多關(guān)于JavaScript 聲明提升的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論