摘要：本計(jì)劃一共期，每期重點(diǎn)攻克一個(gè)面試重難點(diǎn)，如果你還不了解本進(jìn)階計(jì)劃，點(diǎn)擊查看前端進(jìn)階的破冰之旅本期推薦文章深入之執(zhí)行上下文棧和深入之變量對(duì)象，由于微信不能訪(fǎng)問(wèn)外鏈，點(diǎn)擊閱讀原文就可以啦。

（關(guān)注福利，關(guān)注本公眾號(hào)回復(fù)[資料]領(lǐng)取優(yōu)質(zhì)前端視頻，包括Vue、React、Node源碼和實(shí)戰(zhàn)、面試指導(dǎo)）

本周正式開(kāi)始前端進(jìn)階的第一期，本周的主題是調(diào)用堆棧，今天是第二天。

本計(jì)劃一共28期，每期重點(diǎn)攻克一個(gè)面試重難點(diǎn)，如果你還不了解本進(jìn)階計(jì)劃，點(diǎn)擊查看前端進(jìn)階的破冰之旅

JavaScript深入之執(zhí)行上下文棧和JavaScript深入之變量對(duì)象，由于微信不能訪(fǎng)問(wèn)外鏈，點(diǎn)擊閱讀原文就可以啦。

本期推薦了兩篇文章，主要原因是兩篇連在一起閱讀理解會(huì)更加深一些，其中部分知識(shí)我在【進(jìn)階1-1期】已經(jīng)介紹過(guò)了，但是本文從另一個(gè)角度介紹了執(zhí)行上下文和變量對(duì)象，條理清晰，并配有代碼解釋?zhuān)档靡蛔x。

JS是單線(xiàn)程的語(yǔ)言，執(zhí)行順序肯定是順序執(zhí)行，但是JS 引擎并不是一行一行地分析和執(zhí)行程序，而是一段一段地分析執(zhí)行，會(huì)先進(jìn)行編譯階段然后才是執(zhí)行階段。

翠花，上代碼

例子一：變量提升

foo;  // undefined
var foo = function () {
    console.log("foo1");
}

foo();  // foo1，foo賦值

var foo = function () {
    console.log("foo2");
}

foo(); // foo2，foo重新賦值

例子二：函數(shù)提升

foo();  // foo2
function foo() {
    console.log("foo1");
}

foo();  // foo2

function foo() {
    console.log("foo2");
}

foo(); // foo2

例子三：聲明優(yōu)先級(jí)，函數(shù) > 變量

foo();  // foo2
var foo = function() {
    console.log("foo1");
}

foo();  // foo1，foo重新賦值

function foo() {
    console.log("foo2");
}

foo(); // foo1

上面三個(gè)例子中，第一個(gè)例子是變量提升，第二個(gè)例子是函數(shù)提升，第三個(gè)例子是函數(shù)聲明優(yōu)先級(jí)高于變量聲明。

需要注意的是同一作用域下存在多個(gè)同名函數(shù)聲明，后面的會(huì)替換前面的函數(shù)聲明。

執(zhí)行上下文總共有三種類(lèi)型

全局執(zhí)行上下文：只有一個(gè)，瀏覽器中的全局對(duì)象就是 window 對(duì)象，this 指向這個(gè)全局對(duì)象。

函數(shù)執(zhí)行上下文：存在無(wú)數(shù)個(gè)，只有在函數(shù)被調(diào)用的時(shí)候才會(huì)被創(chuàng)建，每次調(diào)用函數(shù)都會(huì)創(chuàng)建一個(gè)新的執(zhí)行上下文。

Eval 函數(shù)執(zhí)行上下文： 指的是運(yùn)行在 eval 函數(shù)中的代碼，很少用而且不建議使用。

這部分內(nèi)容在【進(jìn)階1-1期】中詳細(xì)介紹了，點(diǎn)擊查看【進(jìn)階1-1期】理解JavaScript 中的執(zhí)行上下文和執(zhí)行棧

因?yàn)镴S引擎創(chuàng)建了很多的執(zhí)行上下文，所以JS引擎創(chuàng)建了執(zhí)行上下文棧（Execution context stack，ECS）來(lái)管理執(zhí)行上下文。

當(dāng) JavaScript 初始化的時(shí)候會(huì)向執(zhí)行上下文棧壓入一個(gè)全局執(zhí)行上下文，我們用 globalContext 表示它，并且只有當(dāng)整個(gè)應(yīng)用程序結(jié)束的時(shí)候，執(zhí)行棧才會(huì)被清空，所以程序結(jié)束之前， 執(zhí)行棧最底部永遠(yuǎn)有個(gè) globalContext。

ECStack = [        // 使用數(shù)組模擬棧
    globalContext
];

具體執(zhí)行過(guò)程如下圖所示，這部分內(nèi)容在【進(jìn)階1-1期】中詳細(xì)介紹了，點(diǎn)擊查看【進(jìn)階1-1期】理解JavaScript 中的執(zhí)行上下文和執(zhí)行棧

有如下兩段代碼，執(zhí)行的結(jié)果是一樣的，但是兩段代碼究竟有什么不同？

var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f();
}
checkscope();

var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f;
}
checkscope()();

答案是 執(zhí)行上下文棧的變化不一樣。

第一段代碼：

ECStack.push( functionContext);
ECStack.push( functionContext);
ECStack.pop();
ECStack.pop();

第二段代碼：

ECStack.push( functionContext);
ECStack.pop();
ECStack.push( functionContext);
ECStack.pop();

在函數(shù)上下文中，用活動(dòng)對(duì)象(activation object, AO)來(lái)表示變量對(duì)象。

活動(dòng)對(duì)象和變量對(duì)象的區(qū)別在于

1、變量對(duì)象（VO）是規(guī)范上或者是JS引擎上實(shí)現(xiàn)的，并不能在JS環(huán)境中直接訪(fǎng)問(wèn)。

2、當(dāng)進(jìn)入到一個(gè)執(zhí)行上下文后，這個(gè)變量對(duì)象才會(huì)被激活，所以叫活動(dòng)對(duì)象（AO），這時(shí)候活動(dòng)對(duì)象上的各種屬性才能被訪(fǎng)問(wèn)。

調(diào)用函數(shù)時(shí)，會(huì)為其創(chuàng)建一個(gè)Arguments對(duì)象，并自動(dòng)初始化局部變量arguments，指代該Arguments對(duì)象。所有作為參數(shù)傳入的值都會(huì)成為Arguments對(duì)象的數(shù)組元素。

執(zhí)行上下文的代碼會(huì)分成兩個(gè)階段進(jìn)行處理

1、進(jìn)入執(zhí)行上下文

2、代碼執(zhí)行

進(jìn)入執(zhí)行上下文

很明顯，這個(gè)時(shí)候還沒(méi)有執(zhí)行代碼

此時(shí)的變量對(duì)象會(huì)包括（如下順序初始化）：

1、函數(shù)的所有形參 (only函數(shù)上下文)：沒(méi)有實(shí)參，屬性值設(shè)為undefined。

2、函數(shù)聲明：如果變量對(duì)象已經(jīng)存在相同名稱(chēng)的屬性，則完全替換這個(gè)屬性。

3、變量聲明：如果變量名稱(chēng)跟已經(jīng)聲明的形參或函數(shù)相同，則變量聲明不會(huì)干擾已經(jīng)存在的這類(lèi)屬性。

上代碼就直觀(guān)了

function foo(a) {
  var b = 2;
  function c() {}
  var d = function() {};

  b = 3;
}

foo(1);

對(duì)于上面的代碼，這個(gè)時(shí)候的AO是

AO = {
    arguments: {
        0: 1,
        length: 1
    },
    a: 1,
    b: undefined,
    c: reference to function c(){},
    d: undefined
}

形參arguments這時(shí)候已經(jīng)有賦值了，但是變量還是undefined，只是初始化的值

代碼執(zhí)行

這個(gè)階段會(huì)順序執(zhí)行代碼，修改變量對(duì)象的值，執(zhí)行完成后AO如下

AO = {
    arguments: {
        0: 1,
        length: 1
    },
    a: 1,
    b: 3,
    c: reference to function c(){},
    d: reference to FunctionExpression "d"
}

總結(jié)如下：

1、全局上下文的變量對(duì)象初始化是全局對(duì)象

2、函數(shù)上下文的變量對(duì)象初始化只包括 Arguments 對(duì)象

3、在進(jìn)入執(zhí)行上下文時(shí)會(huì)給變量對(duì)象添加形參、函數(shù)聲明、變量聲明等初始的屬性值

4、在代碼執(zhí)行階段，會(huì)再次修改變量對(duì)象的屬性值

JavaScript深入之執(zhí)行上下文棧   
JavaScript深入之變量對(duì)象

【進(jìn)階1-1期】理解JavaScript 中的執(zhí)行上下文和執(zhí)行棧

【進(jìn)階1-2期】JavaScript深入之執(zhí)行上下文棧和變量對(duì)象

【進(jìn)階1-3期】JavaScript深入之內(nèi)存空間詳細(xì)圖解

【進(jìn)階1-4期】JavaScript深入之帶你走進(jìn)內(nèi)存機(jī)制制

【進(jìn)階1-5期】JavaScript深入之4類(lèi)常見(jiàn)內(nèi)存泄漏及如何避免

【進(jìn)階2-1期】深入淺出圖解作用域鏈和閉包

每周面試重難點(diǎn)計(jì)劃如下，如有修改會(huì)通知大家。每周一期，為期半年，準(zhǔn)備明年跳槽的小伙伴們可以把本公眾號(hào)置頂了。

【進(jìn)階1期】 調(diào)用堆棧

【進(jìn)階2期】 作用域閉包

【進(jìn)階3期】 this全面解析

【進(jìn)階4期】 深淺拷貝原理

【進(jìn)階5期】 原型Prototype

【進(jìn)階6期】 高階函數(shù)

【進(jìn)階7期】 事件機(jī)制

【進(jìn)階8期】 Event Loop原理

【進(jìn)階9期】 Promise原理

【進(jìn)階10期】Async/Await原理

【進(jìn)階11期】防抖/節(jié)流原理

【進(jìn)階12期】模塊化詳解

【進(jìn)階13期】ES6重難點(diǎn)

【進(jìn)階14期】計(jì)算機(jī)網(wǎng)絡(luò)概述

【進(jìn)階15期】瀏覽器渲染原理

【進(jìn)階16期】webpack配置

【進(jìn)階17期】webpack原理

【進(jìn)階18期】前端監(jiān)控

【進(jìn)階19期】跨域和安全

【進(jìn)階20期】性能優(yōu)化

【進(jìn)階21期】VirtualDom原理

【進(jìn)階22期】Diff算法

【進(jìn)階23期】MVVM雙向綁定

【進(jìn)階24期】Vuex原理

【進(jìn)階25期】Redux原理

【進(jìn)階26期】路由原理

【進(jìn)階27期】VueRouter源碼解析

【進(jìn)階28期】ReactRouter源碼解析

本人Github鏈接如下，歡迎各位Star

http://github.com/yygmind/blog

我是木易楊，網(wǎng)易高級(jí)前端工程師，跟著我每周重點(diǎn)攻克一個(gè)前端面試重難點(diǎn)。接下來(lái)讓我?guī)阕哌M(jìn)高級(jí)前端的世界，在進(jìn)階的路上，共勉！

如果你想加群討論每期面試知識(shí)點(diǎn)，公眾號(hào)回復(fù)[加群]即可