1. 程式人生 > >js深入(三)作用域鏈與閉包

js深入(三)作用域鏈與閉包

在之前我們根絕物件的原型說過了js的原型鏈,那麼同樣的js 萬物皆物件,函式也同樣存在這麼一個鏈式的關係,就是函式的作用域鏈

作用域鏈

首先先來回顧一下之前講到的原型鏈的尋找機制,就是例項會先從本身開始找,沒有的話會一級一級的網上翻,直到頂端沒有就會報一個undefined

同樣的js的機制就是這樣的,函式在執行的時候會先函式本身的上下文的變數物件中查詢,沒有的話,也會從這個函式被建立的時候的父級的執行上下文的變數物件中去找(詞法環境),一直找到全域性上下文的變數物件(比如客戶端的window物件),這個多層的執行上下文的鏈式關係就是函式的作用域鏈

盜一張圖

作用域被建立的時機

大家可以看到,我在控制檯聲明瞭一個函式,並且列印了他,這個a函式的裡邊有一個[[scope]]屬性,

這是一個內部屬性,當一個函式被建立的時候,會儲存所有的父級的變數物件(詞法環境)到這個裡邊,比如說上圖中 就有一個global 屬性展開後,往下找你會發現很多我們常見的屬性和方法,比如alert等等

如圖

函式作用域的生命週期

姑且叫他生命週期,我是這麼理解的,當進入一個函式的上下文,經歷了建立階段之後,就會把函式的作用域鏈創建出來,直到銷燬這個上下文,這個作用域鏈也是存在的

先來一個正經的例子

function a(){
    var aaa = 'aaa';
    return aaa;
}
checkscope();

這個函式的生命週期是這樣的

  • 首先函式被建立,先把函式的作用域鏈儲存到函式的[[scope]]屬性上邊

    a.[[scope]] = [
    globalContext.VO//這個也就是我們上邊圖片裡邊看的golbal
    ];

globalContext 全域性上下文 VO 這個之前沒有介紹 是Variable object的簡稱,也就是之前經常提到的變數物件
還有一個AO ,這個AO指的是函式被啟用的時候(被執行)得活動物件

  • 建立完成之後,執行到a函式,建立了a函式得執行上下文,並壓入執行棧裡邊

現在執行棧裡邊已經有了兩個執行上下文一個globalContext還有一個aContext

  • 到了a函式之後,首先會做一些列得準備工作,就是之前講到得函式得arguments,this等等

首先第一步複製之前得[[scope]]屬性,建立作用域鏈

aContext = {
    Scope: a.[[scope]],
}

然後開始初始化活動變數 argments物件 形參,函式宣告,變數宣告等等

最後把把活動變數也塞到作用域鏈中去

以上,一個函式得準備工作就算是做完了,然後下一步就是函式得執行階段

  • 之前講過,在之後階段得時候函式會根據程式碼給之前得活動物件賦值,然後執行裡邊得程式碼,直到執行完畢

  • 最後,函式執行完畢,函式得上下文被從上下文棧中彈出銷燬

在彈出得最後時候,a函式得結構大概長成這個樣子

aContext = {
    AO: {
        arguments: {
            length: 0
        },
    },
    Scope: [AO, [[Scope]]]
}

接下來我們在舉一個不正經得例子,就是為了證明一下作用域鏈即使在函式被銷燬後,也會存在這麼一個事實

閉包

首先什麼是閉包,閉包是指在一個函式內部能夠訪問不是函式得引數,也不是區域性變數得函式,所以廣義得講我們用的所有得函式都是可算作是閉包,都能訪問全域性變數。。。

不過工作中不是這樣子得,說正題,給上邊得問題舉個例子

var item = '1'
function a(){
    var item = '2'
    function b(){
        return item
    }
    return b;
}

var foo = a();
foo();

試著猜想一下這段程式碼得執行過程

還是來一步一步得解釋一下

  • 首先不用多想,進入全域性程式碼,建立全域性執行上下文,推入執行棧,全域性上下文得一系列初始化

  • 然後建立a , 建立上下文,推入執行棧,一些列得初始化

在執行a得時候建立了b函式,這個時候,還記得上邊之前說過得把,作用域鏈是在被建立得時候確定得

這個時候得b函式得作用域鏈應該是這個樣子的

bContext = {
    Scope: [AO, aContext.AO, globalContext.VO],
}

這個是重點,我們先把執行過程說完

  • 在a函式執行完畢之後,a的上下文棧被彈出

  • 然後在後邊執行b函式,然後一樣的套路,進上下文壓入棧

  • 進棧一些列的初始化

  • 執行完畢b的上下文被彈出

上邊已經把順序說的很清楚了對吧, 執行過程是a進棧出棧,b進棧出棧,但是你列印這段程式碼的時候
會打印出一個2,就是因為雖然說a的上下文被銷燬了,但是b的作用域鏈裡邊還是有a的活動物件的
,在b的上下文裡邊可以找到這個item

這也就是我們之前所說的閉包,也符合閉包的定義

  • 建立他的函式的上下文被銷燬,但是他依然存在

  • 在程式碼中引用了不是自身的引數或者區域性變數

最後放一個網上很常見的面試題

var data = [];

for (var i = 0; i < 3; i++) {
  data[i] = function () {
    console.log(i);
  };
}

data[0]();
data[1]();
data[2]();

從作用域鏈的角度思考一下會打印出什麼結果,為什麼會打印出這個結果

以上是我對js的作用域鏈和閉包的一些認識,有不足之處,希望批評指