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

更新時間：2020年08月06日 11:22:32 作者：Lpyexplore

這篇文章主要介紹了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的原因。