當(dāng)前位置:首頁(yè) >  站長(zhǎng) >  編程技術(shù) >  正文

淺談JavaScript 聲明提升

 2020-10-28 14:19  來(lái)源: 腳本之家   我來(lái)投稿 撤稿糾錯(cuò)

  域名預(yù)訂/競(jìng)價(jià),好“米”不錯(cuò)過(guò)

這篇文章主要介紹了JavaScript 聲明提升的相關(guān)資料,幫助大家更好的理解和學(xué)習(xí)JavaScript,感興趣的朋友可以了解下

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è)聲明:

定義聲明var a,會(huì)在編譯階段進(jìn)行;

賦值聲明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í)

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

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

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

上面的兩種寫(xiě)法,運(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;//與函數(shù)聲明同名,故失效
function getName() {
 console.log(2);
}
getName = function() {//賦值
 console.log(1);
};
getName();

答案:打印1

解析:提升后的順序如下

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)文章!

來(lái)源:腳本之家

鏈接:https://www.jb51.net/article/195552.htm

申請(qǐng)創(chuàng)業(yè)報(bào)道,分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處,共同探討創(chuàng)業(yè)新機(jī)遇!

相關(guān)標(biāo)簽
javascript
java

相關(guān)文章

  • 參加Java培訓(xùn)班有用嗎?這個(gè)問(wèn)題大家要怎么看待

    在眾多的編程培訓(xùn)中,Java軟件開(kāi)發(fā)作為老牌兒的編程主流,從發(fā)展前景上看,無(wú)論是現(xiàn)在還是將來(lái),依然會(huì)持續(xù)火爆的狀態(tài)。對(duì)于當(dāng)下年輕人想要快速的掌握這項(xiàng)技術(shù),進(jìn)入到這個(gè)行業(yè),最為熱議的話題是“參加Java培訓(xùn)班有用嗎”。小編可以肯定的回答,是有用的,學(xué)習(xí)的根據(jù)來(lái)自于興趣,如果大家是真的熱愛(ài)這行,在加上專

    標(biāo)簽:
    java
  • 動(dòng)力節(jié)點(diǎn)南京Java培訓(xùn)口碑教學(xué),滿分教學(xué)就業(yè)體驗(yàn)

    江南佳地,邂逅金陵,動(dòng)力節(jié)點(diǎn)南京Java培訓(xùn)校區(qū),為長(zhǎng)三角地帶的發(fā)展注入專業(yè)Java教培力量,動(dòng)力節(jié)點(diǎn)自09年成立至今,專注Java培訓(xùn)教學(xué),一直秉承著“為學(xué)員服務(wù)”的唯一教育理念,堅(jiān)持口碑教學(xué),被業(yè)界稱為“口口相傳的Java培訓(xùn)黃埔軍校”。

    標(biāo)簽:
    java
    java培訓(xùn)
  • 動(dòng)力節(jié)點(diǎn)廣州Java培訓(xùn),為大家撐起一個(gè)IT的未來(lái)

    廣州動(dòng)力節(jié)點(diǎn)Java培訓(xùn)機(jī)構(gòu),一直以來(lái)專注Java的教學(xué),深耕教育,穩(wěn)扎穩(wěn)打,在行業(yè)具有“口口相傳的黃埔軍?!敝Q,有句話說(shuō)的好“沒(méi)有量變的積累,哪來(lái)質(zhì)變的飛躍”動(dòng)力節(jié)點(diǎn)和你一起,扎扎實(shí)實(shí)做教育,你們?cè)鷮?shí)實(shí)學(xué)本領(lǐng),時(shí)刻準(zhǔn)備著,有朝一日,風(fēng)自會(huì)來(lái)。

    標(biāo)簽:
    java
    在線培訓(xùn)
  • 動(dòng)力節(jié)點(diǎn)成都Java培訓(xùn)招生源于口碑,業(yè)界巨頭

    為了能夠搭乘互聯(lián)網(wǎng)的快車,實(shí)現(xiàn)人生的逆轉(zhuǎn),不少年輕人選擇動(dòng)力節(jié)點(diǎn)成都Java培訓(xùn),動(dòng)力節(jié)點(diǎn)作為Java職業(yè)培訓(xùn),沒(méi)有理由不去擔(dān)起這份沉甸甸的信任,所以,自09年創(chuàng)立起,一直專注于Java的教學(xué),將全部的資源

  • 參加動(dòng)力節(jié)點(diǎn)北京Java培訓(xùn)會(huì)讓學(xué)者更加有信心

    通過(guò)Java培訓(xùn)出來(lái)的同學(xué)與沒(méi)參加過(guò)培訓(xùn)的同學(xué)差距還是有不少的,同學(xué)一直以來(lái)對(duì)參加培訓(xùn)都保持著猶豫的心態(tài),其實(shí)大家了解后會(huì)發(fā)現(xiàn),不管是對(duì)零基礎(chǔ)還是有編程認(rèn)知的同學(xué)來(lái)講,參與更加密集、系統(tǒng)化的培訓(xùn)

熱門排行

信息推薦