js深入（三）作用域鏈與閉包

blair 發(fā)布于2019-08-23 18:35 / 2442人閱讀

摘要：在之前我們根絕對象的原型說過了的原型鏈，那么同樣的萬物皆對象，函數(shù)也同樣存在這么一個鏈?zhǔn)降年P(guān)系，就是函數(shù)的作用域鏈作用域鏈?zhǔn)紫认葋砘仡櫼幌轮爸v到的原型鏈的尋找機(jī)制，就是實(shí)例會先從本身開始找，沒有的話會一級一級的網(wǎng)上翻，直到頂端沒有就會報(bào)一

在之前我們根絕對象的原型說過了js的原型鏈，那么同樣的js 萬物皆對象，函數(shù)也同樣存在這么一個鏈?zhǔn)降年P(guān)系，就是函數(shù)的作用域鏈

作用域鏈

首先先來回顧一下之前講到的原型鏈的尋找機(jī)制，就是實(shí)例會先從本身開始找，沒有的話會一級一級的網(wǎng)上翻，直到頂端沒有就會報(bào)一個undefined

同樣的js的機(jī)制就是這樣的，函數(shù)在執(zhí)行的時候會先函數(shù)本身的上下文的變量對象中查找，沒有的話，也會從這個函數(shù)被創(chuàng)建的時候的父級的執(zhí)行上下文的變量對象中去找（詞法環(huán)境），一直找到全局上下文的變量對象（比如客戶端的window對象），這個多層的執(zhí)行上下文的鏈?zhǔn)疥P(guān)系就是函數(shù)的作用域鏈

盜一張圖

作用域被創(chuàng)建的時機(jī)

大家可以看到，我在控制臺聲明了一個函數(shù)，并且打印了他，這個a函數(shù)的里邊有一個[[scope]]屬性，
這是一個內(nèi)部屬性，當(dāng)一個函數(shù)被創(chuàng)建的時候，會保存所有的父級的變量對象（詞法環(huán)境）到這個里邊，比如說上圖中就有一個global 屬性展開后，往下找你會發(fā)現(xiàn)很多我們常見的屬性和方法，比如alert等等

如圖

函數(shù)作用域的生命周期

姑且叫他生命周期，我是這么理解的，當(dāng)進(jìn)入一個函數(shù)的上下文，經(jīng)歷了創(chuàng)建階段之后，就會把函數(shù)的作用域鏈創(chuàng)建出來，直到銷毀這個上下文，這個作用域鏈也是存在的

先來一個正經(jīng)的例子

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

這個函數(shù)的生命周期是這樣的

首先函數(shù)被創(chuàng)建，先把函數(shù)的作用域鏈保存到函數(shù)的[[scope]]屬性上邊

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

globalContext  全局上下文  VO 這個之前沒有介紹 是Variable object的簡稱，也就是之前經(jīng)常提到的變量對象
還有一個AO ，這個AO指的是函數(shù)被激活的時候（被執(zhí)行）得活動對象

創(chuàng)建完成之后，執(zhí)行到a函數(shù)，創(chuàng)建了a函數(shù)得執(zhí)行上下文，并壓入執(zhí)行棧里邊

現(xiàn)在執(zhí)行棧里邊已經(jīng)有了兩個執(zhí)行上下文一個globalContext還有一個aContext

到了a函數(shù)之后，首先會做一些列得準(zhǔn)備工作，就是之前講到得函數(shù)得arguments,this等等

首先第一步復(fù)制之前得[[scope]]屬性，創(chuàng)建作用域鏈

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

然后開始初始化活動變量 argments對象形參，函數(shù)聲明，變量聲明等等

最后把把活動變量也塞到作用域鏈中去

以上，一個函數(shù)得準(zhǔn)備工作就算是做完了，然后下一步就是函數(shù)得執(zhí)行階段

之前講過，在之后階段得時候函數(shù)會根據(jù)代碼給之前得活動對象賦值，然后執(zhí)行里邊得代碼，直到執(zhí)行完畢

最后，函數(shù)執(zhí)行完畢，函數(shù)得上下文被從上下文棧中彈出銷毀

在彈出得最后時候，a函數(shù)得結(jié)構(gòu)大概長成這個樣子

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

接下來我們在舉一個不正經(jīng)得例子，就是為了證明一下作用域鏈即使在函數(shù)被銷毀后，也會存在這么一個事實(shí)

閉包

首先什么是閉包，閉包是指在一個函數(shù)內(nèi)部能夠訪問不是函數(shù)得參數(shù)，也不是局部變量得函數(shù)，所以廣義得講我們用的所有得函數(shù)都是可算作是閉包，都能訪問全局變量。。。

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

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

var foo = a();
foo();

試著猜想一下這段代碼得執(zhí)行過程

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

首先不用多想，進(jìn)入全局代碼，創(chuàng)建全局執(zhí)行上下文，推入執(zhí)行棧，全局上下文得一系列初始化

然后創(chuàng)建a ，創(chuàng)建上下文，推入執(zhí)行棧，一些列得初始化

在執(zhí)行a得時候創(chuàng)建了b函數(shù)，這個時候，還記得上邊之前說過得把，作用域鏈?zhǔn)窃诒粍?chuàng)建得時候確定得

這個時候得b函數(shù)得作用域鏈應(yīng)該是這個樣子的

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

這個是重點(diǎn)，我們先把執(zhí)行過程說完

在a函數(shù)執(zhí)行完畢之后，a的上下文棧被彈出

然后在后邊執(zhí)行b函數(shù)，然后一樣的套路，進(jìn)上下文壓入棧

進(jìn)棧一些列的初始化

執(zhí)行完畢b的上下文被彈出

上邊已經(jīng)把順序說的很清楚了對吧，執(zhí)行過程是a進(jìn)棧出棧，b進(jìn)棧出棧，但是你打印這段代碼的時候
會打印出一個2，就是因?yàn)殡m然說a的上下文被銷毀了，但是b的作用域鏈里邊還是有a的活動對象的
，在b的上下文里邊可以找到這個item

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

創(chuàng)建他的函數(shù)的上下文被銷毀，但是他依然存在

在代碼中引用了不是自身的參數(shù)或者局部變量

最后放一個網(wǎng)上很常見的面試題

var data = [];

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

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

從作用域鏈的角度思考一下會打印出什么結(jié)果，為什么會打印出這個結(jié)果

以上是我對js的作用域鏈和閉包的一些認(rèn)識，有不足之處，希望批評指正

云服務(wù)器 GPU云服務(wù)器作用域鏈 javascript作用域鏈 js閉包 js閉包的理解

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/105504.html

發(fā)表評論

登陸后可評論

0條評論

blair

男|高級講師

我要關(guān)注我要私信

TA的文章

如何選擇虛擬主機(jī)服務(wù)-服務(wù)器與虛擬主機(jī)有什么區(qū)別？

閱讀 1448·2021-09-22 15:43
Slog64_項(xiàng)目上線之ArthurSlog個人網(wǎng)站上線3

閱讀 2162·2019-08-30 15:54
瀏覽器內(nèi)核

閱讀 1164·2019-08-30 10:51
圖片自適應(yīng)

閱讀 2089·2019-08-29 18:35
你不是一個前端

閱讀 435·2019-08-26 11:58
簡單的js圖片壓縮上傳，支持IE10及以上瀏覽器

閱讀 2484·2019-08-26 11:38
js深入（三）作用域鏈與閉包

閱讀 2443·2019-08-23 18:35
【Vue.js】vue-router實(shí)現(xiàn)二級導(dǎo)航切換路由及高亮顯示

閱讀 3640·2019-08-23 18:33

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

js深入（三）作用域鏈與閉包

相關(guān)文章

**前端基礎(chǔ)進(jìn)階（六）：在chrome開發(fā)者工具中觀察函數(shù)調(diào)用棧、作用域鏈與閉包**

**“動靜結(jié)合” 小白初探靜態(tài)(詞法)作用域，作用域鏈與執(zhí)行環(huán)境(EC)**

**前端基礎(chǔ)進(jìn)階（四）：詳細(xì)圖解作用域鏈與閉包**

**JS基礎(chǔ)-作用域、作用域鏈與閉包 Part three**

**Javascript 函數(shù)、作用域鏈與閉包**

發(fā)表評論

0條評論

blair

男|高級講師

TA的文章

如何選擇虛擬主機(jī)服務(wù)-服務(wù)器與虛擬主機(jī)有什么區(qū)別？

Slog64_項(xiàng)目上線之ArthurSlog個人網(wǎng)站上線3

瀏覽器內(nèi)核

圖片自適應(yīng)

你不是一個前端

簡單的js圖片壓縮上傳，支持IE10及以上瀏覽器

js深入（三）作用域鏈與閉包

【Vue.js】vue-router實(shí)現(xiàn)二級導(dǎo)航切換路由及高亮顯示

最新活動