快捷導(dǎo)航

淺析JavaScript中變量提升的原理與使用

更新時間：2023年05月17日 10:53:58 作者：劍老師_

前端的小伙伴大概都知道，js中的var變量存在變量提升，在es6以后隨著let變量的出現(xiàn)，變量提升問題得以解決，那么變量提升的原理是什么，es6又是怎么解決變量提升問題的，下面我們來共同探尋答案

執(zhí)行上下文

當一段js代碼被執(zhí)行時，js引擎會先對其進行編譯，并創(chuàng)建執(zhí)行上下文。執(zhí)行上下文分為三種：全局執(zhí)行上下文、函數(shù)執(zhí)行上下文、eval執(zhí)行上下文

全局執(zhí)行上下文在js執(zhí)行全局代碼時，js引擎會創(chuàng)建一個全局的執(zhí)行上下文，全局執(zhí)行上下文在頁面的生命周期內(nèi)只有一份。即每個js文件，只有一個全局上下文。
函數(shù)執(zhí)行上下文當執(zhí)行一個js函數(shù)時，js引擎會創(chuàng)建一個函數(shù)執(zhí)行上下文，當函數(shù)執(zhí)行結(jié)束之后，函數(shù)的執(zhí)行上下文會被銷毀。一個函數(shù)被多次調(diào)用，會創(chuàng)建多個執(zhí)行上下文。
eval執(zhí)行上下文使用eval函數(shù)執(zhí)行一段js代碼時，會創(chuàng)建一個eval的執(zhí)行上下文。

當js文件執(zhí)行時，首先會創(chuàng)建全局執(zhí)行上下文，并壓入調(diào)用棧，當調(diào)用js函數(shù)時，會創(chuàng)建函數(shù)執(zhí)行上下文，并壓入調(diào)用棧。當函數(shù)執(zhí)行完之后，函數(shù)執(zhí)行上下文便會從棧中移出。如以下代碼的執(zhí)行：

var a = "123"
function func1() {
    var b = "123"
    console.log(b)
    func2()
}
funcgion func2() {
    const c = "456"
    console.log(c)
}
func1()

執(zhí)行上下文中其實還包含了另外兩個對象，一個變量環(huán)境對象和一個詞法環(huán)境對象。那么接下來我們來看一下什么是變量環(huán)境和詞法環(huán)境

變量環(huán)境

變量環(huán)境存在于執(zhí)行上下文中，其本質(zhì)是一個對象，變量環(huán)境中存儲的是此作用域內(nèi)定義的變量、函數(shù)信息等信息。如全局執(zhí)行上下文中的變量環(huán)境存儲的是全局的變量和函數(shù)信息。函數(shù)執(zhí)行上下文中的變量環(huán)境則存放的是函數(shù)的參數(shù)、局部變量等信息。

其實，js的代碼在執(zhí)行前還有一個編譯的過程，在編譯過程中，var變量和function函數(shù)部分會被js引擎放入到變量環(huán)境中，并且變量會被默認設(shè)置為undefined。在執(zhí)行階段，js引擎會在變量環(huán)境中查找聲明的變量和函數(shù)。這就是我們所說的“變量提升”，這也是為什么函數(shù)可以在函數(shù)的實現(xiàn)之前調(diào)用。

例：

console.log(a)
var a = "123"
function func1() {
    console.log(a)
}
func1()

以上代碼的執(zhí)行順序是：

js引擎先進行編譯，并把a變量和func1放入到變量環(huán)境中，并把a變量設(shè)置為undefined
進入執(zhí)行階段，執(zhí)行第一行代碼console.log(a)，此時從變量環(huán)境中取出a的值為undefined，所以打印結(jié)果為undefined。
執(zhí)行第二行代碼var a = "123"，將變量環(huán)境中的a變量賦值為字符串123。
執(zhí)行最后一行代碼func1()，js引擎從變量環(huán)境中找出對應(yīng)的func1，并執(zhí)行里面的代碼console.log(a)，打印結(jié)果為123

所以以上代碼輸出結(jié)果為

undefined
123

雖然在a聲明之前打印a變量，但是卻并沒有報錯。

詞法環(huán)境

在ES6之前，js中只支持全局作用域和函數(shù)作用域，并不支持塊級作用域。ES6之后，js引入了let和const關(guān)鍵字，從而解決了變量提升問題并使js支持了塊級作用域。

其實說let和const沒有變量提升并不準確，當js代碼被編譯時，let和const變量代碼會被存放在詞法環(huán)境中。此時let和const變量已經(jīng)被提升了，但是只是創(chuàng)建被提升，初始化和賦值并沒有被提升，如果在賦值之前去讀寫該變量，便會報錯，這就是我們所說的“暫時性死區(qū)”。

那實現(xiàn)塊級作用域的原理是什么呢？其實在詞法環(huán)境中，維護了一個作用域棧，棧底是函數(shù)的最外層變量（let和const聲明的變量），進入一個作用域塊后，就會把該作用域中的變量入棧；當作用域中的代碼執(zhí)行完成之后，該作用域的信息就會從棧頂彈出。我們舉個以下例子來說明

例：

function fun()
{
    let a = 1
    {
        let a = 2
        let b = 3
        console.log(a)
        console.log(b)
    }
    console.log(a)
    console.log(b)
}
fun()

如圖：

當fun函數(shù)被編譯時，外層的a變量首先被創(chuàng)建，并存放至詞法環(huán)境作用域棧中，此時函數(shù)內(nèi)部的塊級作用域中的變量不會被創(chuàng)建。
當函數(shù)執(zhí)行至作用域塊時，let a和let b也被創(chuàng)建并入棧存放至棧頂。并將a賦值為2，將賦值為3。
當執(zhí)行至console.log(a)和console.log(b)時，js引擎首先從棧頂找到a和b的值并打印出2和3。
當作用域塊執(zhí)行完成之后，作用域塊中的變量信息從棧中彈出。
接著執(zhí)行console.log(a)找到的是棧底的a變量，并打印出1。接著執(zhí)行console.log(b)，由于在詞法環(huán)境和變量環(huán)境中都找不到b變量，所以便會報錯b is not defined。

如果同一個函數(shù)中不同作用域存在相同的變量（如上面例子的a），那么變量的查找順序是怎樣的呢？

首先在詞法環(huán)境作用域棧的棧頂?shù)淖兞啃畔⒅虚_始查找
如果找到該變量，則直接返回該變量在此作用域塊中的值，如果沒有找到則從棧頂往下依次查找。
如果從詞法環(huán)境中的棧頂?shù)綏５锥紱]有找到，則從變量環(huán)境中查找。

總結(jié)

講到這里，我想應(yīng)該可以回答一下文章開始所提的兩個問題：

變量提升的原理是什么？在js代碼編譯階段，var變量和function函數(shù)會被js引擎放入到變量環(huán)境中，并且var變量會被默認設(shè)置為undefined。需要注意的是，var變量只有創(chuàng)建和初始化被提升，賦值并沒有被提升；而function的創(chuàng)建、初始化和賦值均會被提升。所以在變量的聲明之前訪問，該變量的值是undefined，而函數(shù)則可以在聲明之前正常調(diào)用。

let、const是怎么解決變量提升問題的? 在js代碼編譯階段，let和const變量會被js引擎放入到詞法環(huán)境中。與var一樣，let和const變量也被提升了。但只是創(chuàng)建被提升，變量的初始化和賦值并未被提升，如果在賦值之前讀寫該變量，就會形成暫時性死區(qū)。

到此這篇關(guān)于淺析JavaScript中變量提升的原理與使用的文章就介紹到這了,更多相關(guān)JavaScript變量提升內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: