1.作用域

作用域,即變量(變量作用域又稱上下文)和函數生效(能被訪問)的區域或集合
換句話說,作用域決定了代碼區塊中變量和其他資源的可見性
舉個例子

function fn(){var info='函數內部變量'}fn()//要先執行這個函數,否則根本不知道里面是啥console.log(info)//Uncaught ReferenceError: info is not defined

上述例子中,函數fn內部創建一個info變量,當我們在全局訪問這個變量的時候,系統會報錯
這就說明我們是無法獲取到(閉包除外)函數內部的變量
我們一般將作用域分成

• 全局作用域
• 局部作用域
• 塊級作用域

全局作用域

任何不在函數或是大括號中聲明的變量,都是在全局作用域下,全局作用域中聲明的變量可以在程序的任意位置訪問

var info = 'hello world'function fn() {console.log(info)}fn() //打印hello world

局部作用域

如果一個變量是在函數內部聲明的,它就在局部作用域下,這個變量只能在函數內部訪問,不能再函數以外去訪問

function fn() {var info = 'hello world'console.log(info)}fn() //打印hello worldconsole.log(info) //Uncaught ReferenceError: info is not defined

可見上述代碼在函數內部聲明的變量或函數,在函數外部是無法訪問的,這說明在函數內部定義的變量或方法只是函數作
用域

塊級作用域

ES6引入了let和const關鍵字,和var關鍵字不同,在大括號中使用let和const聲明的變量存在于塊級作用域中,在大括號之外不能訪問這些變量

{//塊級作用域中的變量var msg = 'English'let info = 'hello world'const num = 10console.log(msg) //Englishconsole.log(info)//hello worldconsole.log(num) //10}console.log(msg) //Englishconsole.log(info) //Uncaught ReferenceError: info is not definedconsole.log(num) //Uncaught ReferenceError: num is not defined

2.詞法作用域

詞法作用域,又叫靜態作用域,變量被創建時就確定好了,而非執行階段確定的,也就是說我們寫好代碼時它的作用域就確定了,JavaScript遵循的就是詞法作用域

var a = 2function foo() {console.log(a)}function bar() {var a = 3foo()}bar() //2

上述代碼改變成一張圖

由于JavaScript遵循詞法作用域,相同層級的foo和bar就沒有辦法訪問到彼此塊級作用域中的變量,所以輸出為2

2.作用域鏈

當在JavaScript中使用一個變量的時候,首先JavaScript引擎會嘗試在當前作用域下去尋找該變量,如果找不到,再到它的上層作用域去找,以此類推直到找到該變量或是已經到了全局作用域,如果在全局作用域中仍然找不到該變量,它就會在全局范圍內隱式聲明該變量(非嚴格模式下)或是直接報錯

var sex = '男'function person() {var name = '張三'function student() {var age = 18console.log(name)//張三console.log(sex)//男}student()console.log(age) //Uncaught ReferenceError: age is not defined}person()

上述代碼主要做了以下工作:

• student函數內部屬于最內層作用域,找不到name,向上一層作用域person函數內部找,找到了輸出"張三"
• student函數內部輸出sex時,找不到sex,會向上一層作用域person函數內部找,找不到繼續向上一層找,即全局作用域找到了sex,輸出"男"
• person函數內部輸出age時,找不到,向上一層作用域找,即全局作用域,還是找不到則報錯

總結

以上是生活随笔為你收集整理的JavaScript中作用域详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。