本文轉(zhuǎn)載自微信公眾號(hào)「小鹿動(dòng)畫(huà)學(xué)編程」，作者小鹿 。轉(zhuǎn)載本文請(qǐng)聯(lián)系小鹿動(dòng)畫(huà)學(xué)編程公眾號(hào)。

本文繼上篇文章詳細(xì)講解的 JavaScript 執(zhí)行上下文繼續(xù)深入作用域與作用域鏈。

在上一篇文章中《簡(jiǎn)而不單，單而不簡(jiǎn)!》，主要分享到了執(zhí)行上下文的概念，而作用域和閉包是基于執(zhí)行上下文的概念去理解的，如果還沒(méi)了解執(zhí)行上下文，不建議看本篇內(nèi)容。

[[388056]]

一、作用域

如果說(shuō)執(zhí)行上下文是代碼的執(zhí)行環(huán)境，那么作用域就是執(zhí)行環(huán)境中的一套執(zhí)行規(guī)則，既然是規(guī)則，JavaScript 引擎執(zhí)行代碼時(shí)要遵守這套規(guī)則，同時(shí)開(kāi)發(fā)人員在寫代碼時(shí)，同樣也要遵守這套規(guī)則。

1. 什么是作用域

我們先來(lái)看這樣一個(gè)例子：

function foo () { 
  var bar = 'xiaolu' 
} 
foo() 
console.log(bar)  

上述的運(yùn)行結(jié)果很明顯，控制臺(tái)會(huì)報(bào)錯(cuò) bar is not defined,我們可以通過(guò)這個(gè)小例子就可以發(fā)現(xiàn)在函數(shù)外部訪問(wèn)函數(shù)內(nèi)部聲明的變量是不可訪問(wèn)的，這背后的原因就是 JavaScript 作用域存在導(dǎo)致的結(jié)果。

2. 什么是詞法環(huán)境

說(shuō)到作用域，那什么是作用域?我們先來(lái)認(rèn)識(shí)一下這位老朋友詞法環(huán)境。

說(shuō)的直白一點(diǎn)，詞法環(huán)境就是一套規(guī)范和規(guī)則，它用來(lái)規(guī)定某些函數(shù)和變量的可訪問(wèn)范圍等，我們也稱詞法環(huán)境為「詞法作用域」。

既然詞法作用域是一套約定好的規(guī)則，那么詞法作用域的作用范圍是開(kāi)發(fā)人員在寫代碼的時(shí)候就已經(jīng)是確定了的。

當(dāng)代碼執(zhí)行的時(shí)候， JavaScript 引擎就會(huì)根據(jù)這套規(guī)范通過(guò)標(biāo)識(shí)符名稱來(lái)查找相對(duì)應(yīng)的變量和函數(shù)。

好吧，最后給它做個(gè)總結(jié)性的定義。

2. 作用域鏈

作用域我們弄明白了，我們?cè)賮?lái)看作用域鏈。作用域鏈和作用域卻大不相同，咱們分別從「執(zhí)行棧層面」和「代碼層面」來(lái)體驗(yàn)一下什么是作用域鏈。

var name = "xiaolu"; 
function fn () { 
  console.log(name); 
  function getName(){ 
    console.log(name); 
  } 
  getName(); 
} 
fn(); 

執(zhí)行棧中的作用域鏈?zhǔn)疽鈭D：

該示意圖為上述代碼的執(zhí)行情況，在上述示意圖中，不同的色塊縮進(jìn)形成的可訪問(wèn)鏈就是我們所說(shuō)的作用域鏈。

雖然上述示意圖是抽象出來(lái)的，如果我們?cè)诖a層面來(lái)理解作用域鏈，又是如何實(shí)現(xiàn)的呢?

在上一篇中分享到，每當(dāng)創(chuàng)建一個(gè)新的執(zhí)行上下文時(shí)，都會(huì)創(chuàng)建一個(gè)「變量對(duì)象」用于存放當(dāng)前執(zhí)行上下文中的變量和函數(shù)。(記住：這個(gè)變量對(duì)象很重要)

如果我們把這些執(zhí)行上下文的「變量對(duì)象」關(guān)聯(lián)起來(lái)，就形成了一條鏈，我們把這條鏈的實(shí)現(xiàn)稱為「作用域鏈」。

上述代碼的執(zhí)行結(jié)果是打印輸出：

var name = "xiaolu"; 
function fn () { 
  console.log(name); 
  function getName(){ 
    console.log(name); 
  } 
  getName(); 
} 
fn(); 

當(dāng)內(nèi)部的 getName 執(zhí)行時(shí) JavaScript 引擎就在 getName 作用域內(nèi)查找變量 name，發(fā)現(xiàn)并沒(méi)有，就會(huì)沿著上圖中的作用域鏈往上層尋找，在 fn 的作用域中也沒(méi)有發(fā)現(xiàn) name 變量，然后繼續(xù)沿著作用域鏈往上層的尋找，直到全局作用域中，發(fā)現(xiàn)存在變量 name，然后輸出 name 的值。