變量提升問題筆記

提升

這里我們不考慮 ES6 這部分的知識點

前期知識準(zhǔn)備

1、首先先理解 JavaScript 是如何執(zhí)行代碼的

JavaScript 是動態(tài)語言瑟押,在執(zhí)行代碼時要先進(jìn)行編譯枷颊。

  • 第一部分是編譯代碼(主要是全局聲明函數(shù)和變量)生音,并且生成代碼(將用戶的代碼生成符合 JavaScript 正確順序執(zhí)行久妆,具體順序后面有細(xì)講)

  • 第二部分是執(zhí)行代碼(執(zhí)行函數(shù)或變量賦值)

2脉让、了解 JavaScript 中的 引擎桂敛、編譯器、作用域三者的作用及區(qū)別

  • 引擎:從頭到尾負(fù)責(zé)整個 JavaScript 程序的編譯及執(zhí)行過程溅潜。
  • 編譯器:負(fù)責(zé)語法分析及代碼生成
  • 作用域:負(fù)責(zé)收集并維護(hù)有所有聲明的標(biāo)識符(變量)組成的一系列查詢埠啃,并實施非常嚴(yán)格的規(guī)則,確定當(dāng)前執(zhí)行的代碼對這些標(biāo)識符的訪問權(quán)限伟恶。

<img src="https://i.loli.net/2021/09/19/DV8ivWMm7hB1Jfr.png" style="zoom:80%;" />

上才藝

// 調(diào)用函數(shù)
fun1();

// 聲明全局變量
var g = 2;

// 函數(shù)聲明
function fun1() {
   console.log(b);
   var b = 0;
   console.log(b);
   console.log(g); 
} 
  • 補充:

    • 局部作用域 指的是函數(shù)內(nèi)部(函數(shù)分很多種碴开,這里是所有函數(shù))

    • var b =2 在程序中是被拆分成 var b b =2

    • 函數(shù)聲明的優(yōu)先級要高于變量

      • var a = 10;
        function a() {}
        console.log(typeof a) // number  
        
      • 函數(shù)可以分為函數(shù)聲明,函數(shù)表達(dá)式博秫,立即執(zhí)行函數(shù)等潦牛,但唯獨函數(shù)聲明會提升

  • 第一步:程序會被轉(zhuǎn)成 JavaScript 內(nèi)部認(rèn)為正確的順序

    • function fun1() {
          var b;
          console.log(b); // undefined
          b = 0;
          console.log(b); // 0
          console.log(g); // undefined
      }
      var g; 
      fun1();
      g = 2;
      
    • 依據(jù)以下幾點來判斷其順序

      • 從上往下(全局)看:看到變量聲明或函數(shù)表達(dá)式時將其提到最前面挡育。且函數(shù)聲明的優(yōu)先級要高于變量(可以理解為在當(dāng)前作用域中函數(shù)表達(dá)式始終是在最前面的)
      • 接下來就是調(diào)整局部作用域中的函數(shù)表達(dá)式和變量聲明巴碗,依據(jù)跟上面一樣。
  • 第二步:將全局及局部變量和函數(shù)告訴作用域即寒,作用域會根據(jù)信息給變量和函數(shù)創(chuàng)建相對應(yīng)的空間

    • 如何創(chuàng)建依據(jù)以下幾點

      • 前提:變量和函數(shù)在全局下橡淆。直接在頂級作用域聲明變量和函數(shù)
      • 局部(函數(shù))下:在局部作用域下聲明變量和函數(shù)。
  • 第三步:代碼執(zhí)行階段母赵,就是按第一步生成的順序從上到下來執(zhí)行逸爵。

在上面的小例子中,在 JavaScript 執(zhí)行被我分為三部分凹嘲。真正執(zhí)行是倆部分(編譯階段和執(zhí)行階段)师倔,只不過在編譯階段要經(jīng)歷第一步和第二步。為了方便理解周蹭,我把它細(xì)分出來趋艘。

執(zhí)行階段

具體看下面代碼

(function() {
  var a = b = 5;
})()
console.log(b);
console.log(a);

根據(jù)上面的例子疲恢,很容易可以得到真正的執(zhí)行順序

(function() {
   var a;
   a = b;
   b = 5;
})();
console.log(b); // 5
console.log(a); // Uncaughte ReferenceError: a is not defined

這里跟第一個案例的區(qū)別在于執(zhí)行階段

在 a = b 賦值階段,首先

  • 引擎會問作用域在立即執(zhí)行函數(shù)中是否存在 變量 b 瓷胧;
  • 作用域在該作用域(立即執(zhí)行函數(shù))下找變量 b显拳,若沒有找到。此時作用域會接著往上一層作用域找變量 b 直到找到頂級作用域還沒有找到搓萧,直接告訴引擎編譯器沒有聲明該變量萎攒。
  • 引擎接收到信息后,執(zhí)行 a = b 由于程序中并沒有存在變量 b , 故執(zhí)行 console.log(a); 會報錯 Uncaughte ReferenceError: a is not defined

在 b = 5 這個階段跟上面是不一樣矛绘,在賦值前變量已經(jīng)被創(chuàng)建了耍休,只不過是在全局下聲明,故在 console.log(b) 輸出結(jié)果為 5

這里就涉及到 RHS 和 LHS 具體看 這里

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末货矮,一起剝皮案震驚了整個濱河市羊精,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌囚玫,老刑警劉巖喧锦,帶你破解...
    沈念sama閱讀 216,651評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異抓督,居然都是意外死亡燃少,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,468評論 3 392
  • 文/潘曉璐 我一進(jìn)店門铃在,熙熙樓的掌柜王于貴愁眉苦臉地迎上來阵具,“玉大人,你說我怎么就攤上這事定铜⊙粢海” “怎么了?”我有些...
    開封第一講書人閱讀 162,931評論 0 353
  • 文/不壞的土叔 我叫張陵揣炕,是天一觀的道長帘皿。 經(jīng)常有香客問我,道長畸陡,這世上最難降的妖魔是什么鹰溜? 我笑而不...
    開封第一講書人閱讀 58,218評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮丁恭,結(jié)果婚禮上曹动,老公的妹妹穿的比我還像新娘。我一直安慰自己涩惑,他們只是感情好仁期,可當(dāng)我...
    茶點故事閱讀 67,234評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著竭恬,像睡著了一般跛蛋。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上痊硕,一...
    開封第一講書人閱讀 51,198評論 1 299
  • 那天赊级,我揣著相機(jī)與錄音,去河邊找鬼岔绸。 笑死理逊,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的盒揉。 我是一名探鬼主播晋被,決...
    沈念sama閱讀 40,084評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼刚盈!你這毒婦竟也來了羡洛?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,926評論 0 274
  • 序言:老撾萬榮一對情侶失蹤藕漱,失蹤者是張志新(化名)和其女友劉穎欲侮,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體肋联,經(jīng)...
    沈念sama閱讀 45,341評論 1 311
  • 正文 獨居荒郊野嶺守林人離奇死亡威蕉,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,563評論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了橄仍。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片韧涨。...
    茶點故事閱讀 39,731評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖侮繁,靈堂內(nèi)的尸體忽然破棺而出氓奈,到底是詐尸還是另有隱情,我是刑警寧澤鼎天,帶...
    沈念sama閱讀 35,430評論 5 343
  • 正文 年R本政府宣布舀奶,位于F島的核電站,受9級特大地震影響斋射,放射性物質(zhì)發(fā)生泄漏育勺。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,036評論 3 326
  • 文/蒙蒙 一罗岖、第九天 我趴在偏房一處隱蔽的房頂上張望涧至。 院中可真熱鬧,春花似錦桑包、人聲如沸南蓬。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,676評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽赘方。三九已至烧颖,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間窄陡,已是汗流浹背炕淮。 一陣腳步聲響...
    開封第一講書人閱讀 32,829評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留跳夭,地道東北人涂圆。 一個月前我還...
    沈念sama閱讀 47,743評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像币叹,于是被迫代替她去往敵國和親润歉。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,629評論 2 354

推薦閱讀更多精彩內(nèi)容