動圖演示變量提高，通俗易懂！

做者：Ahmad shaded
譯者：前端小智
來源：sitepoint

有夢想，有乾貨，微信搜索 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及個人系列文章。

'提高'是 JS 開發都常常接觸的一個術語，若是你剛接觸 JS，可能會遇到一些奇怪的行爲，其中一些變量是隨機undefined，會拋出ReferenceErrors 異常等等。提高一般被解釋爲將變量和函數放到做用域頂部，但實際上並非這樣，儘管行爲看起來是這樣的。

當 JS 引擎獲取咱們的代碼時，它要作的第一件事就是爲代碼中的數據設置內存。 目前尚未執行任何代碼，只是準備要執行的全部內容。 函數聲明和變量的存儲方式不一樣。 函數是以按保存函數的引用的方式來存儲。

1.函數是以按保存函數的引用的方式來存儲（Functions are stored with a reference to the entire function）

使用變量，則有所不一樣。 ES6 引入了兩個新的關鍵字來聲明變量：let和const。 用let或const關鍵字聲明的變量保存的狀態是 uninitialized。

2.用let或const關鍵字聲明的變量保存的狀態是 uninitialized

使用var關鍵字聲明的變量存儲的默認值爲undefined。

如今建立階段已經完成，咱們能夠執行代碼。讓咱們看看在聲明函數或任何變量以前，若是頂部執行3個console.log語句會發生什麼。

因爲函數存儲在對整個函數代碼的引用中，因此咱們能夠在建立它們的行以前調用它們。

4.在執行階段，咱們能夠在聲明函數以前調用它們，由於咱們在內存中引用了整個函數(During the execution phase, we can invoke a function before we declared them, since we a reference to the entire function in memory)

當咱們在變量聲明以前引用var關鍵字聲明的變量時，它只會返回其存儲時的默認值:undefined。然而，這有時會致使「意料以外」的行爲。在大多數狀況下，咱們有可能會無心中從新引用了它(你可能不但願它的值爲undefined)

5. 當咱們在變量聲明以前引用var關鍵字聲明的變量時，它只會返回其存儲時的默認值:undefined

爲了防止意外引用undefined的變量，就像咱們可使用var關鍵字同樣，每當咱們試圖訪問未初始化(uninitialized )的變量時，都會拋出一個ReferenceError。在它們實際聲明以前的「區域」稱爲**臨時死區**:不能在它們的初始化以前引用變量(這也包括ES6類`)

6.每當咱們試圖訪問未初始化(uninitialized )的變量時，都會拋出一個ReferenceError。在它們實際聲明以前的「區域」稱爲臨時死區**

當引擎經過咱們實際聲明變量的那一行時，內存中的值會被咱們實際聲明的值覆蓋。

總結

• 在執行代碼以前，函數和變量存儲在內存中，用於執行上下文，這就是所謂的提高。
• 函數存儲爲對整個函數的引用，用var關鍵字聲明的變量默認值爲undefined，用let和const關鍵字聲明變量默認存儲值爲uninitialized。

但願本文對你有所幫助，感謝閱讀。

---

原文：https://dev.to/lydiahallie/ja...

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

交流

有夢想，有乾貨，微信搜索 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588... 已收錄，有一線大廠面試完整考點、資料以及個人系列文章。