變量提升

首先我們看一段代碼的執(zhí)行

1

這段代碼的輸出是?undefined重贺, 為什么它會是?undefined ,而不是?a is not defined回懦,這就跟 JS 的運行機制有關气笙。


JS 中的 聲明 和 賦值

? ? 對于簡單的? var a = 1 聲明語句,我們可以理解為兩個步驟:

? ? ? ? 1 聲明部分: var a怯晕;

? ? ? ? 2 賦值部分: a = 1;

? ? 那么 函數的 聲明 和 賦值 又是如何的

2

? ? ? ? 對于 foo 函數 是一個完整的函數聲明潜圃,沒有涉及到 賦值操作; 而第二個函數 先聲明了 變量 bar 舟茶,再將 函數 賦值給 bar谭期。


再談變量提升

? ? 理解了 聲明 和 賦值,那么 什么是 變量提升

? ? ? ? 變量提升吧凉,是指在 JavaScript 代碼執(zhí)?過程中隧出,JavaScript 引擎把變量的聲明部分和函數的聲明部 分提升到代碼開頭的“行為”。變量被提升后阀捅,會給變量設置默認值胀瞪,這個默認值就是我們熟悉的 unde?ned。?

? ? 也就是說 對于 var a = 1饲鄙,可以理解為兩步:

? ? ? ? 1? var a = undefined;

? ? ? ? 2? a = 1;

? ? ? ? 注意 :?只有 聲明本身 會被提升凄诞,而 賦值或其他運行邏輯 會留在原地。

3

? ? 注意: 在每個作用域中忍级,都會進行提升操作帆谍,比如 在函數 作用域內 用 var 聲明的,會提升至 本作用域 的開頭轴咱。


再談 var a = 1

? ? JS 在執(zhí)行 var a = 1 這段代碼時汛蝙,變量 和 函數聲明 在代碼里的位置是不會改變的烈涮,而是在編譯 階段被JavaScript引擎放入內存中 。一段 JS 代碼在執(zhí)行前 需要被 JS 引擎 編譯患雇,編譯完成之后 才會進入 執(zhí)行階段跃脊。

? ? 一段 JS 代碼? --------->? ?編譯階段?? --------->? ?執(zhí)行階段

? ??這意味著無論作用域中的聲明出現在什么地方,都將在代碼本身被執(zhí)行前首先進行處理苛吱。 可以將這個過程形象地想象成所有的聲明(變量和函數)都會被“移動”到各自作用域的 最頂端酪术,這個過程被稱為提升

????聲明本身會被提升翠储,而包括函數表達式的賦值在內的賦值操作并不會提升绘雁。

?編譯階段?

????????還是上面的 例子

4

? ? 一段 JS 代碼 經過 編譯階段后 會生成 兩部分:執(zhí)行上下文 和? 可執(zhí)行代碼

5


? ? 執(zhí)行上下文 是 JS 執(zhí)行一段代碼時的 運行環(huán)境援所, 它存在 一個變量環(huán)境對象庐舟,這個對象保存了 變量提升部分的內容,比如上面例子中的 變量 a 和 函數 foo住拭。

? ? 分析 圖4 中的代碼:

? ? ? ? 1 第一行和第二行 不是聲明操作挪略, JS 引擎不處理。

? ? ? ? 2 第三行 是 一個 var 的聲明變量滔岳, JS 引擎會在環(huán)境對象中 創(chuàng)建一個 名為 a 的 屬性杠娱,并初始化值 undefined

? ? ? ? 3 第四行 是函數聲明語句, JS 引擎?會在環(huán)境對象中 創(chuàng)建一個 名為 foo的 屬性, 并將函數定義存儲到 堆中谱煤,屬性值 指向 函數所在堆的地址摊求。

? ? 這樣 就生成了?變量環(huán)境對象。

執(zhí)行階段

? ? 在執(zhí)行階段刘离, JS 引擎就會處理 執(zhí)行階段的代碼室叉,JS 引擎 就會在?變量環(huán)境對象 中 找到 所需要的值,并輸出結果硫惕。


總結

? ? JS 代碼在執(zhí)行過程中茧痕,會經過兩個階段 : 編譯階段 執(zhí)行階段

? ? 在編譯階段恼除,變量和函數會被存放到 變量環(huán)境 中踪旷,變量的默認值會被設置為 unde?ned;在執(zhí)行階段缚柳,JavaScript 引擎會從變量環(huán)境中去查找?定義的變量和函數。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末搪锣,一起剝皮案震驚了整個濱河市秋忙,隨后出現的幾起案子,更是在濱河造成了極大的恐慌构舟,老刑警劉巖灰追,帶你破解...
    沈念sama閱讀 218,525評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡弹澎,警方通過查閱死者的電腦和手機朴下,發(fā)現死者居然都...
    沈念sama閱讀 93,203評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來苦蒿,“玉大人殴胧,你說我怎么就攤上這事∨宄伲” “怎么了团滥?”我有些...
    開封第一講書人閱讀 164,862評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長报强。 經常有香客問我灸姊,道長,這世上最難降的妖魔是什么秉溉? 我笑而不...
    開封第一講書人閱讀 58,728評論 1 294
  • 正文 為了忘掉前任力惯,我火速辦了婚禮,結果婚禮上召嘶,老公的妹妹穿的比我還像新娘父晶。我一直安慰自己,他們只是感情好苍蔬,可當我...
    茶點故事閱讀 67,743評論 6 392
  • 文/花漫 我一把揭開白布诱建。 她就那樣靜靜地躺著,像睡著了一般碟绑。 火紅的嫁衣襯著肌膚如雪俺猿。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,590評論 1 305
  • 那天格仲,我揣著相機與錄音押袍,去河邊找鬼。 笑死凯肋,一個胖子當著我的面吹牛谊惭,可吹牛的內容都是我干的。 我是一名探鬼主播侮东,決...
    沈念sama閱讀 40,330評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼圈盔,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了悄雅?” 一聲冷哼從身側響起驱敲,我...
    開封第一講書人閱讀 39,244評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎宽闲,沒想到半個月后众眨,有當地人在樹林里發(fā)現了一具尸體握牧,經...
    沈念sama閱讀 45,693評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,885評論 3 336
  • 正文 我和宋清朗相戀三年娩梨,在試婚紗的時候發(fā)現自己被綠了沿腰。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,001評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡狈定,死狀恐怖颂龙,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情掸冤,我是刑警寧澤厘托,帶...
    沈念sama閱讀 35,723評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站稿湿,受9級特大地震影響铅匹,放射性物質發(fā)生泄漏。R本人自食惡果不足惜饺藤,卻給世界環(huán)境...
    茶點故事閱讀 41,343評論 3 330
  • 文/蒙蒙 一包斑、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧涕俗,春花似錦罗丰、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,919評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至元镀,卻和暖如春绍填,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背栖疑。 一陣腳步聲響...
    開封第一講書人閱讀 33,042評論 1 270
  • 我被黑心中介騙來泰國打工讨永, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人遇革。 一個月前我還...
    沈念sama閱讀 48,191評論 3 370
  • 正文 我出身青樓卿闹,卻偏偏與公主長得像,于是被迫代替她去往敵國和親萝快。 傳聞我的和親對象是個殘疾皇子锻霎,可洞房花燭夜當晚...
    茶點故事閱讀 44,955評論 2 355