作用域是JavaScript中非常基礎(chǔ)的概念，很多剛?cè)腴T的同學(xué)卻弄不懂作用域的概念，但不弄明白的話又不能夠?qū)懗龈咝Ш?jiǎn)介的代碼，今天小千就來(lái)給大家介紹一下關(guān)于前端JavaScript作用域的那點(diǎn)事。

什么是作用域？

JavaScript 中的作用域是指變量的可訪問(wèn)性或可見性，也就是說(shuō)，程序的哪些部分可以訪問(wèn)該變量，或者該變量在何處可見。

為什么作用域很重要？

作用域的主要好處是安全性。也就是說(shuō)，只能從程序的特定區(qū)域訪問(wèn)變量，使用作用域，我們可以避免程序其他部分對(duì)變量的意外修改。

作用域可減少命名沖突。也就是說(shuō)，我們可以在不同的作用域內(nèi)使用相同的變量名。

作用域類型

JavaScript中有三種類型的作用域：全局作用域、局部作用域或函數(shù)作用域、塊級(jí)作用域。

1.全局作用域

不在函數(shù)或塊（一對(duì)花括號(hào)）內(nèi)定義的任何變量都在全局作用域內(nèi)，可以從程序的任何位置訪問(wèn)全局作用域內(nèi)的變量。例如：

2.局部作用域或函數(shù)作用域

利用var在函數(shù)體內(nèi)部聲明的變量都在局部作用域（或稱函數(shù)作用域）內(nèi)，它們只能從該函數(shù)內(nèi)部訪問(wèn)，不能在外部代碼中訪問(wèn)。例如：

3.塊級(jí)作用域

ECMAScript 2015 引入了 let 和 const 來(lái)定義變量，與 var 定義變量不同，它們的作用域是在最接近的花括號(hào)內(nèi)，這意味著，不能從那對(duì)花括號(hào)之外訪問(wèn)它們。例如：

我們可以看到 var 定義的變量可以在塊外部使用，而 let 定義的變量不能在塊外部訪問(wèn)。

4.嵌套作用域

就像 JavaScript中的函數(shù)一樣，一個(gè)作用域可以嵌套在另一個(gè)作用域內(nèi)。例如：

這個(gè)代碼片段中有3個(gè)作用域彼此嵌套。首先，塊級(jí)作用域（由 let 定義的變量創(chuàng)建）嵌套在局部作用域或函數(shù)作用域內(nèi)，而后者又嵌套在全局作用域內(nèi)。

5.詞法作用域

詞法作用域（也稱為靜態(tài)作用域），從字面上講是指作用域是在詞法分析（通常稱為編譯）時(shí)確定的，而不是在運(yùn)行時(shí)確定的。以題主的問(wèn)題作為示例：

在這里，不管是從哪兒調(diào)用 test() 函數(shù)，console.log(a) 總是會(huì)打印 hello world，這與具有 動(dòng)態(tài)作用域 的語(yǔ)言 console.log(a) 不同，后者會(huì)根據(jù)調(diào)用函數(shù)的位置而打印不同的值。

如果上面的代碼是用支持動(dòng)態(tài)作用域的語(yǔ)言編寫的，console.log(a) 則會(huì)打印出來(lái) I belong to func。

使用詞法作用域，我們可以僅通過(guò)查看源代碼來(lái)確定變量的作用域，而在動(dòng)態(tài)作用域下，只有在執(zhí)行代碼后才能確定作用域。

6.作用域鏈

當(dāng)在 JavaScript 中使用變量時(shí)，JavaScript 引擎將嘗試在當(dāng)前作用域中查找變量的值，如果找不到變量，它將查找外部作用域并將繼續(xù)這樣做，直到找到變量或到達(dá)全局作用域?yàn)橹埂Ｈ绻谌肿饔糜蛑腥匀徽也坏皆撟兞?#xff0c;它將在全局作用域內(nèi)隱式聲明該變量（非嚴(yán)格模式下）或返回錯(cuò)誤。

調(diào)用 bar() 函數(shù)時(shí)，JavaScript 引擎將查找 bar 變量并在當(dāng)前作用域中找到了它。接下來(lái)，在當(dāng)前作用域中查找 foo 變量，但無(wú)法找到它，因此繼續(xù)在外部作用域中查找并找到了它（即全局作用域）。

之后，我們?yōu)?num 變量賦值 99，JavaScript 引擎在當(dāng)前作用域中查找 num 變量，找不到，然后在外部作用域（全局作用域）中查找變量，也找不到，由于腳本不在嚴(yán)格模式下，因此創(chuàng)建一個(gè)名為 num 的新全局變量，并為其分配變量值 99。

以上就是關(guān)于JavaScript作用域的介紹和案例了，希望能幫到大家！

本文來(lái)自千鋒教育，轉(zhuǎn)載請(qǐng)注明出處。

與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的关于JavaScript的作用域你应该了解的那点事！的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。