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

我們首先來(lái)了解幾個(gè)概念，執(zhí)行上下文、變量環(huán)境、詞法環(huán)境。(本文不涉及閉包、this指向等問(wèn)題)

執(zhí)行上下文

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

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

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

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

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

變量環(huán)境

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

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

例：

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

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

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

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

undefined
123

雖然在a聲明之前打印a變量，但是卻并沒(méi)有報(bào)錯(cuò)。

詞法環(huán)境

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

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

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

例：

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

如圖：

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

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

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

總結(jié)

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

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

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

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

最新評(píng)論