JavaScript中作用域鏈的概念及用途講解
從零開始講解JavaScript中作用域鏈的概念及用途
引言
之前我寫過一篇關(guān)于JavaScript中的對象的一篇文章,里面也提到了作用域鏈的概念,相信大家對這個概念還是沒有很深的理解,并且這個概念也是面試中經(jīng)常問到的,因為這個概念實在太重要了,在我們平時寫代碼時,也可能會因為作用域鏈的問題,而出現(xiàn)莫名其妙的bug,導致我們花費大量的時間都查找不出原因。所以我就準備單獨寫一篇關(guān)于作用域鏈的文章,來幫大家更好地理解這個概念。
正文
一、執(zhí)行環(huán)境
首先,我們要引入一個概念,叫做執(zhí)行環(huán)境(下面簡稱環(huán)境)。在一個執(zhí)行環(huán)境中,有一個與之關(guān)聯(lián)的變量對象(下面簡稱對象),在該對象中,儲存著這個執(zhí)行環(huán)境中定義的變量和函數(shù)。但這個對象只是個形式上的對象,并不能被外界所訪問到。
例如,在瀏覽器中,我們在全局運行下列代碼,那么當前的執(zhí)行環(huán)境就是window,也就是全局,并且與該全局環(huán)境關(guān)聯(lián)的對象中存儲著定義的變量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中,函數(shù)也會形成一個環(huán)境,例如下列的代碼中,函數(shù)的內(nèi)部就是一個局部的環(huán)境,與該環(huán)境關(guān)聯(lián)的對象中存儲著變量my_favorite;而此時全局環(huán)境window中,也有一個與之關(guān)聯(lián)的對象,該對象中存儲著變量fruit 和函數(shù) 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>
二、作用域鏈
看了上面兩個例子,我們對執(zhí)行環(huán)境應該有了一定的了解,那么這里就將引入作用域鏈的概念了,當代碼執(zhí)行在一個環(huán)境中時,會針對環(huán)境中儲存變量和函數(shù)的對象創(chuàng)建一個作用域鏈,作用域鏈的最前端就是當前環(huán)境的對象,如果當前環(huán)境是個函數(shù),則作用域鏈的下一部分就是全局的window環(huán)境的變量對象。
先來看一下代碼部分
<script> let fruit = 'banana' function fn() { let color = 'red' //返回 '我最喜歡的水果是banana,我最喜歡的顏色是red' console.log('我最喜歡的水果是' + fruit + ',我最喜歡的顏色是' + color) } fn() //報錯, color is undefined console.log('我最喜歡的水果是' + fruit + ',我最喜歡的顏色是' + color) </script>
首先執(zhí)行了函數(shù) fn ,此時函數(shù)內(nèi)的作用域鏈就是這樣的
我們看到,在函數(shù) fn 中,我們使用了變量 fruit 和 color,所以此時會從作用域鏈的頭部開始,從第一個活動變量(本例中第一個變量對象就是函數(shù)fn的活動變量)中,尋找變量 fruit和 color,發(fā)現(xiàn)該變量對象中存在變量color,于是就成功引用了變量color,但是因為沒有找到變量 fruit,于是再沿著作用域鏈往下找到下一個變量對象(本例中第二個活動變量就是全局window的變量對象),發(fā)現(xiàn)該變量對象中有我們想要的變量 fruit,則引用該變量 fruit ,同時,因為找到了需要引用的變量,就不會繼續(xù)沿著作用域鏈繼續(xù)向下尋找了。
我們再來看在函數(shù)外,也就是全局window中,也執(zhí)行了console.log('我最喜歡的水果是' + fruit + ',我最喜歡的顏色是' + color),此時在全局環(huán)境中的作用域鏈是這樣的
此時也使用了變量 fruit 和 color,所以這時會從作用域鏈的頭部開始,找到第一個變量對象(本例中第一個活動變量就是window全局變量對象),發(fā)現(xiàn)該變量對象中有變量 fruit,所以成功引用該變量對象中的 fruit,但因為沒找到變量 color,所以繼續(xù)沿著作用域鏈向下尋找下一個活動變量,但此時已經(jīng)找到了作用域鏈的尾部,并沒有別的變量對象了,所以也就無法找到變量 color了,所以最后返回的就是 undefined。在本例中我們可以看到,當代碼處于全局環(huán)境中時,是沒有訪問函數(shù)fn執(zhí)行環(huán)境中的變量color的權(quán)力的,這里我們可以這種現(xiàn)象看成是變量color的作用域只是在函數(shù)fn的執(zhí)行環(huán)境內(nèi)。
這就是代碼執(zhí)行時,作用域鏈起到的作用,所以作用域鏈就保證了執(zhí)行環(huán)境中代碼對變量的有序訪問。
三、塊級作用域
在JavaScript中是沒有塊級作用域的,也就是說,由花括號或小括號封閉起來的區(qū)域內(nèi)沒有自己的作用域,例如這兩個例子
if(true) { var fruit = 'banana' } console.log(fruit) //返回 banana
我們可以看到,if 語句中的花括號內(nèi),使用 var 定義了一個變量 fruit,按照作用域鏈的規(guī)則來說,外部是無法訪問到該變量的,但是我們可以看到,確實返回了這個變量的值 banana 。
再來看下一個例子
for(var i=0; i<4; i++) { alert(i) } console.log(i) //返回4
在使用 for語句時,我們在小括號里使用var定義了一個臨時變量i,同樣的的,在 for循環(huán)結(jié)束以后,在外部訪問該變量,也成功返回了相應的值。
以上兩個例子,都是因為JavaScript沒有塊級作用域引起的,所以有時會因為這種情況,導致一些不必要的麻煩。在ES6中,出現(xiàn)了使用 let 和 const聲明變量的方式,來解決了JavaScript中沒有塊級作用域的問題。
你們可以看我之前寫的一篇關(guān)于let 和 const 聲明變量的文章——還沒有理解let 和 const的用法和區(qū)別嗎,幾百字讓你立馬搞懂
四、其他情況
其實,還有一種情況,會影響變量的訪問順序,那就是在聲明變量時,直接給一個未聲明的變量賦值,例如這樣
function fn() { sum = 1 + 2 } fn() console.log(sum) //返回 3
按照我們本文前面講解的作用域鏈的知識,當執(zhí)行到最后一局代碼時,此時處于全局執(zhí)行環(huán)境中,查詢不到變量 sum,所以應當會報錯 undefined,但這里卻返回了 3。
這是因為,在我們使用var聲明變量時,會自動將該變量放到離該代碼最近的活動變量中去,也就是函數(shù)fn的活動變量中,所以在全局執(zhí)行環(huán)境中的代碼就無法訪問到該變量。但是如果不使用var,而是像這個例子中一樣,直接給一個未定義的變量賦值,這時會自動地將該變量放到全局的活動變量中去,這就是導致本例中在全局環(huán)境中還能訪問到變量sum的原因。
五、總結(jié)
- 作用域鏈可以看成是將變量對象按順序連接起來的一根鏈子
- 每個執(zhí)行環(huán)境中的作用域鏈都是不同的
- 當我們引用變量時,會順著當前執(zhí)行環(huán)境的作用域鏈,從作用域鏈的開頭開始依次往下尋找對應的變量,直到找到作用域鏈的尾部,報錯undefined
- 作用域鏈保證了變量的有序訪問
結(jié)束語
好了,對于作用域鏈的講解就到這里了,相信這下大家對JavaScript中的作用域鏈有了很深的理解了吧,我相信,理解了這個概念,可以消除我們代碼中大部分沒必要的BUG。
到此這篇關(guān)于JavaScript中作用域鏈的概念及用途講解的文章就介紹到這了,更多相關(guān)JavaScript中作用域鏈內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS+CSS實現(xiàn)實用的單擊輸入框彈出選擇框的方法
這篇文章主要介紹了JS+CSS實現(xiàn)實用的單擊輸入框彈出選擇框的方法,實例分析了javascript操作select及button的操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02解決js頁面滾動效果scrollTop在FireFox與Chrome瀏覽器間的兼容問題的方法
這篇文章為大家分享了解決js頁面滾動效果scrollTop在FireFox與Chrome瀏覽器間的兼容問題的方法,感興趣或者是遇到這種問題的朋友可以參考這篇文章2015-12-12解決layui上傳文件提示上傳異常,實際文件已經(jīng)上傳成功的問題
今天小編就為大家分享一篇解決layui上傳文件提示上傳異常,實際文件已經(jīng)上傳成功的問題。具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08