JavaScript中作用域鏈的概念及用途講解
從零開始講解JavaScript中作用域鏈的概念及用途
引言
之前我寫過一篇關於JavaScript中的物件的一篇文章,裡面也提到了作用域鏈的概念,相信大家對這個概念還是沒有很深的理解,並且這個概念也是面試中經常問到的,因為這個概念實在太重要了,在我們平時寫程式碼時,也可能會因為作用域鏈的問題,而出現莫名其妙的bug,導致我們花費大量的時間都查找不出原因。所以我就準備單獨寫一篇關於作用域鏈的文章,來幫大家更好地理解這個概念。
正文
一、執行環境
首先,我們要引入一個概念,叫做執行環境(下面簡稱環境)。在一個執行環境中,有一個與之關聯的變數物件(下面簡稱物件),在該物件中,儲存著這個執行環境中定義的變數和函式。但這個物件只是個形式上的物件,並不能被外界所訪問到。
例如,在瀏覽器中,我們在全域性執行下列程式碼,那麼當前的執行環境就是window,也就是全域性,並且與該全域性環境關聯的物件中儲存著定義的變數fruit
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> let fruit = 'banana' alert(fruit) </script> </body> </html>
那麼,在javascript中,函式也會形成一個環境,例如下列的程式碼中,函式的內部就是一個區域性的環境,與該環境關聯的物件中儲存著變數my_favorite;而此時全域性環境window中,也有一個與之關聯的物件,該物件中儲存著變數fruit 和函式 fn1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> let fruit = 'banana' alert(fruit) function fn1() { let my_favorite = 'apple' return my_favorite } fn1() </script> </body> </html>
二、作用域鏈
看了上面兩個例子,我們對執行環境應該有了一定的瞭解,那麼這裡就將引入作用域鏈的概念了,當代碼執行在一個環境中時,會針對環境中儲存變數和函式的物件建立一個作用域鏈,作用域鏈的最前端就是當前環境的物件,如果當前環境是個函式,則作用域鏈的下一部分就是全域性的window環境的變數物件。
先來看一下程式碼部分
<script> let fruit = 'banana' function fn() { let color = 'red' //返回 '我最喜歡的水果是banana,我最喜歡的顏色是red' console.log('我最喜歡的水果是' + fruit + ',我最喜歡的顏色是' + color) } fn() //報錯,color is undefined console.log('我最喜歡的水果是' + fruit + ',我最喜歡的顏色是' + color) </script>
首先執行了函式 fn ,此時函式內的作用域鏈就是這樣的
我們看到,在函式 fn 中,我們使用了變數 fruit 和 color,所以此時會從作用域鏈的頭部開始,從第一個活動變數(本例中第一個變數物件就是函式fn的活動變數)中,尋找變數 fruit和 color,發現該變數物件中存在變數color,於是就成功引用了變數color,但是因為沒有找到變數 fruit,於是再沿著作用域鏈往下找到下一個變數物件(本例中第二個活動變數就是全域性window的變數物件),發現該變數物件中有我們想要的變數 fruit,則引用該變數 fruit ,同時,因為找到了需要引用的變數,就不會繼續沿著作用域鏈繼續向下尋找了。
我們再來看在函式外,也就是全域性window中,也執行了console.log('我最喜歡的水果是' + fruit + ',我最喜歡的顏色是' + color),此時在全域性環境中的作用域鏈是這樣的
此時也使用了變數 fruit 和 color,所以這時會從作用域鏈的頭部開始,找到第一個變數物件(本例中第一個活動變數就是window全域性變數物件),發現該變數物件中有變數 fruit,所以成功引用該變數物件中的 fruit,但因為沒找到變數 color,所以繼續沿著作用域鏈向下尋找下一個活動變數,但此時已經找到了作用域鏈的尾部,並沒有別的變數物件了,所以也就無法找到變數 color了,所以最後返回的就是 undefined。在本例中我們可以看到,當代碼處於全域性環境中時,是沒有訪問函式fn執行環境中的變數color的權力的,這裡我們可以這種現象看成是變數color的作用域只是在函式fn的執行環境內。
這就是程式碼執行時,作用域鏈起到的作用,所以作用域鏈就保證了執行環境中程式碼對變數的有序訪問。
三、塊級作用域
在JavaScript中是沒有塊級作用域的,也就是說,由花括號或小括號封閉起來的區域內沒有自己的作用域,例如這兩個例子
if(true) { var fruit = 'banana' } console.log(fruit) //返回 banana
我們可以看到,if 語句中的花括號內,使用 var 定義了一個變數 fruit,按照作用域鏈的規則來說,外部是無法訪問到該變數的,但是我們可以看到,確實返回了這個變數的值 banana 。
再來看下一個例子
for(var i=0; i<4; i++) { alert(i) } console.log(i) //返回4
在使用 for語句時,我們在小括號裡使用var定義了一個臨時變數i,同樣的的,在 for迴圈結束以後,在外部訪問該變數,也成功返回了相應的值。
以上兩個例子,都是因為JavaScript沒有塊級作用域引起的,所以有時會因為這種情況,導致一些不必要的麻煩。在ES6中,出現了使用 let 和 const宣告變數的方式,來解決了JavaScript中沒有塊級作用域的問題。
你們可以看我之前寫的一篇關於let 和 const 宣告變數的文章——還沒有理解let 和 const的用法和區別嗎,幾百字讓你立馬搞懂
四、其他情況
其實,還有一種情況,會影響變數的訪問順序,那就是在宣告變數時,直接給一個未宣告的變數賦值,例如這樣
function fn() { sum = 1 + 2 } fn() console.log(sum) //返回 3
按照我們本文前面講解的作用域鏈的知識,當執行到最後一局程式碼時,此時處於全域性執行環境中,查詢不到變數 sum,所以應當會報錯 undefined,但這裡卻返回了 3。
這是因為,在我們使用var宣告變數時,會自動將該變數放到離該程式碼最近的活動變數中去,也就是函式fn的活動變數中,所以在全域性執行環境中的程式碼就無法訪問到該變數。但是如果不使用var,而是像這個例子中一樣,直接給一個未定義的變數賦值,這時會自動地將該變數放到全域性的活動變數中去,這就是導致本例中在全域性環境中還能訪問到變數sum的原因。
五、總結
- 作用域鏈可以看成是將變數物件按順序連線起來的一根鏈子
- 每個執行環境中的作用域鏈都是不同的
- 當我們引用變數時,會順著當前執行環境的作用域鏈,從作用域鏈的開頭開始依次往下尋找對應的變數,直到找到作用域鏈的尾部,報錯undefined
- 作用域鏈保證了變數的有序訪問
結束語
好了,對於作用域鏈的講解就到這裡了,相信這下大家對JavaScript中的作用域鏈有了很深的理解了吧,我相信,理解了這個概念,可以消除我們程式碼中大部分沒必要的BUG。
到此這篇關於JavaScript中作用域鏈的概念及用途講解的文章就介紹到這了,更多相關JavaScript中作用域鏈內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!