欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript中作用域鏈的概念及用途講解

 更新時間:2020年08月06日 11:22:32   作者:Lpyexplore  
這篇文章主要介紹了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é)

  1. 作用域鏈可以看成是將變量對象按順序連接起來的一根鏈子
  2. 每個執(zhí)行環(huán)境中的作用域鏈都是不同的
  3. 當我們引用變量時,會順著當前執(zhí)行環(huán)境的作用域鏈,從作用域鏈的開頭開始依次往下尋找對應的變量,直到找到作用域鏈的尾部,報錯undefined
  4. 作用域鏈保證了變量的有序訪問

結(jié)束語

好了,對于作用域鏈的講解就到這里了,相信這下大家對JavaScript中的作用域鏈有了很深的理解了吧,我相信,理解了這個概念,可以消除我們代碼中大部分沒必要的BUG。

到此這篇關(guān)于JavaScript中作用域鏈的概念及用途講解的文章就介紹到這了,更多相關(guān)JavaScript中作用域鏈內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評論