本文轉(zhuǎn)載自微信公眾號「小鹿動畫學編程」，作者小鹿同學。轉(zhuǎn)載本文請聯(lián)系小鹿動畫學編程公眾號。   

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

一、作用域

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

1、什么是作用域

我們先來看這樣一個例子：

 
 
 
 

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

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

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

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

ECMAScript 規(guī)范中對詞法環(huán)境的描述如下：詞法環(huán)境是用來定義基于詞法嵌套結構的 ECMAScript 代碼內(nèi)的標識符與變量值和函數(shù)值之間的關聯(lián)關系的一種規(guī)范類型。

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

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

當代碼執(zhí)行的時候， JavaScript 引擎就會根據(jù)這套規(guī)范通過標識符名稱來查找相對應的變量和函數(shù)。

好吧，最后給它做個總結性的定義。

作用域：作用域是一套約定好的規(guī)范和規(guī)則，它用來規(guī)定某些函數(shù)和變量的可訪問性等。

二、作用域鏈

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

 
 
 
 

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

執(zhí)行棧中的作用域鏈示意圖：

圖片

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

雖然上述示意圖是抽象出來的，如果我們在代碼層面來理解作用域鏈，又是如何實現(xiàn)的呢?

在上一篇中分享到，每當創(chuàng)建一個新的執(zhí)行上下文時，都會創(chuàng)建一個「變量對象」用于存放當前執(zhí)行上下文中的變量和函數(shù)。(記?。哼@個變量對象很重要)

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

圖片

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

1var name = "xiaolu";

2function fn () {

3 console.log(name);

4 function getName(){

5 console.log(name);

6 }

7 getName();

8}

9fn();

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

當前題目：被面試官愛問的作用域與作用域鏈
鏈接URL：http://uogjgqi.cn/article/dpjejgp.html