前言
為什么會有這篇文章？
在書籍或博客上慷妙，我們經(jīng)常會看到「作用域鏈」僻焚、「閉包」、「變量提升」等概念膝擂，說明一個(gè)問題 —— 它們很重要虑啤。
但很多時(shí)候，對于這些概念架馋，看的時(shí)候覺得自己已經(jīng)明白了狞山，可過不了多久，再讓你說一說叉寂，可能就說不清楚了萍启，之所以會這樣，是因?yàn)槲覀儗τ?JavaScript 這門語言的運(yùn)行機(jī)制不清楚屏鳍。
我相信搞明白了今天所講的內(nèi)容勘纯，會對你理解那些知識大有裨益！
函數(shù)調(diào)用棧（call stack）
1. 什么是棧钓瞭？
類似 js 中的數(shù)組驳遵，棧也是用來存儲數(shù)據(jù)的一種數(shù)據(jù)結(jié)構(gòu)。他的特點(diǎn)是后進(jìn)先出（LIFO）山涡。
與之相對的一種數(shù)據(jù)結(jié)構(gòu)稱為隊(duì)列超埋，隊(duì)列的特點(diǎn)是先進(jìn)先出（FIFO）搏讶。
可以想象這樣一種場景：小明和同學(xué)們放學(xué)回家佳鳖，老師讓他在排在隊(duì)伍的最前面霍殴，他們每天回家路上都要經(jīng)過一個(gè)胡同，小明每次都是第一個(gè)進(jìn)入胡同系吩，肯定也是第一個(gè)出來来庭，這就是所謂「先進(jìn)先出」。
可是有一天穿挨，小明他們走到胡同里發(fā)現(xiàn)胡同口停了一輛車月弛，把胡同給堵死了，沒辦法科盛，他們只能隊(duì)頭變隊(duì)尾往回撤帽衙，這時(shí)候，小明雖然最先進(jìn)入胡同贞绵，卻只能最后出去厉萝，最先出去的是排在隊(duì)尾的小華，也就是「后進(jìn)先出」榨崩。
2. 什么叫函數(shù)調(diào)用棧?
在 js 中函數(shù)的調(diào)用也遵照這樣以一個(gè)原則：最先調(diào)用的函數(shù)先放到調(diào)用棧中谴垫，假如這個(gè)函數(shù)內(nèi)部又調(diào)用了別的函數(shù)，那么這個(gè)內(nèi)部函數(shù)就接著被放入調(diào)用棧中母蛛，直至不再有函數(shù)調(diào)用翩剪。最先執(zhí)行完畢的一定是最里面的函數(shù)，執(zhí)行過后彈出調(diào)用棧彩郊，接著執(zhí)行上一層函數(shù)前弯，直至所有函數(shù)執(zhí)行完，調(diào)用棧清空秫逝。
這樣說可能會不太明白恕出，舉個(gè)例子：
// 其他語句
function first() {
console.log('first')
function second() {
console.log("second")
}
second();
third();
// 其他語句
}
//其他語句
function third() {
console.log("third")
}
// 調(diào)用 first
first();
在上述代碼中，首先調(diào)用的是函數(shù) first, 此時(shí) first 進(jìn)入函數(shù)棧筷登，接著在 first 中調(diào)用函數(shù) second,second 入棧剃根，當(dāng) second 執(zhí)行完畢后，second 出棧前方，third 入棧狈醉，接著 third 執(zhí)行完出棧，執(zhí)行 first 其他代碼惠险，直至 first 執(zhí)行完苗傅，函數(shù)棧清空。
執(zhí)行上下文（Execution Context）
1. 什么是執(zhí)行上下文班巩？
js 代碼在執(zhí)行時(shí)渣慕，會進(jìn)入一個(gè)執(zhí)行環(huán)境嘶炭，它會形成一個(gè)作用域。這個(gè)執(zhí)行環(huán)境逊桦，便是執(zhí)行上下文眨猎。
JavaScript 主要有三種執(zhí)行環(huán)境：
- 全局執(zhí)行環(huán)境： 代碼開始執(zhí)行時(shí)首先進(jìn)入的環(huán)境。
- 函數(shù)環(huán)境：函數(shù)調(diào)用時(shí)强经，會開始執(zhí)行函數(shù)中的代碼睡陪。
-
eval：不建議使用，可忽略匿情。
2. 執(zhí)行上下文的生命周期
上面講到 js 代碼執(zhí)行時(shí)會生成一個(gè)執(zhí)行上下文兰迫。而這個(gè)執(zhí)行上下文的周期，分為兩個(gè)階段：
- 創(chuàng)建階段炬称。這個(gè)階段會生成變量對象(VO)汁果，建立作用域鏈以及確定 this 的值。
-
執(zhí)行階段玲躯。這個(gè)階段進(jìn)行變量賦值据德，函數(shù)引用及執(zhí)行代碼。
到這里你應(yīng)該就會明白府蔗，上面函數(shù)調(diào)用棧晋控，就是生成了一個(gè)函數(shù)的執(zhí)行上下文。
執(zhí)行上下文的生命周期
3. 什么是執(zhí)行棧姓赤？
執(zhí)行上下文也同樣遵循函數(shù)調(diào)用棧的規(guī)則赡译，無非就是多加了一層 —— 全局執(zhí)行上下文，函數(shù)執(zhí)行完后會跳出執(zhí)行棧不铆，而全局執(zhí)行上下文蝌焚，會在關(guān)閉瀏覽器后跳出執(zhí)行棧。
還是上面的例子誓斥，我們看一下執(zhí)行棧只洒。
變量對象
1. 什么叫變量對象？
從上面其實(shí)可以得到答案劳坑，變量對象是 js 代碼在進(jìn)入執(zhí)行上下文時(shí)毕谴，js 引擎在內(nèi)存中建立的一個(gè)對象，用來存放當(dāng)前執(zhí)行環(huán)境中的變量距芬。
2. 變量對象(VO)的創(chuàng)建過程
變量對象的創(chuàng)建涝开，是在執(zhí)行上下文創(chuàng)建階段，依次經(jīng)過以下三個(gè)過程：
-
創(chuàng)建 arguments 對象框仔。對于函數(shù)執(zhí)行環(huán)境舀武，首先查詢是否有傳入的實(shí)參，如果有离斩，則會將參數(shù)名是實(shí)參值組成的鍵值對放入arguments 對象中银舱，否則瘪匿，將參數(shù)名和 undefined，組成的鍵值對放入 arguments 對象中寻馏。
function bar(a, b, c) { console.log(arguments); // [2, 4] console.log(arguments[2]); // undefined } bar(2,4) -
檢查當(dāng)前環(huán)境中的函數(shù)聲明棋弥。當(dāng)遇到同名的函數(shù)時(shí)，后面的會覆蓋前面的操软。
在上面的例子中嘁锯，在執(zhí)行第一行代碼之前，函數(shù)聲明已經(jīng)創(chuàng)建完成聂薪，后面的對之前的聲明進(jìn)行了覆蓋。console.log(a); // function a() {console.log('fjdsfs') } function a() { console.log('24'); } function a() { console.log('fjdsfs') } -
檢查當(dāng)前環(huán)境中的變量聲明并賦值為
undefined蝗羊。當(dāng)遇到同名的函數(shù)聲明藏澳，為了避免函數(shù)被賦值為undefined,會忽略此聲明
在上例我們可以看到，在代碼之前前耀找，a 仍舊是一個(gè)函數(shù)翔悠，而 b 是 undefined。console.log(a); // function a() {console.log('fjdsfs') } console.log(b); // undefined function a() { console.log('24'); } function a() { console.log('fjdsfs'); } var b = 'bbbbbbbb'; var a = 46;
根據(jù)以上三個(gè)步驟野芒，對于變量提升也就知道是怎么回事了蓄愁。
3. 變量對象變?yōu)榛顒?dòng)對象
執(zhí)行上下文的第二個(gè)階段，稱為執(zhí)行階段狞悲，在此時(shí)撮抓，會進(jìn)行變量賦值，函數(shù)引用并執(zhí)行其他代碼摇锋，此時(shí)丹拯，變量對象變?yōu)?strong>活動(dòng)對象。
我們還是舉上面的例子：
console.log(a); // function a() {console.log('fjdsfs') }
console.log(b); // undefined
function a() {
console.log('24');
}
function a() {
console.log('fjdsfs');
}
var b = 'bbbb';
console.log(b); // 'bbbb'
var a = 46;
console.log(a); // 46
var b = 'hahahah';
console.log(b); // 'hahah'
在上面的代碼中荸恕，代碼真正開始執(zhí)行是從第一行 console.log() 開始的乖酬，自這之前，執(zhí)行上下文是這樣的：
// 創(chuàng)建過程
EC= {
VO： {}; // 創(chuàng)建變量對象
scopeChain: {}; // 作用域鏈
}
VO = {
argument: {...}; // 當(dāng)前為全局上下文融求，所以這個(gè)屬性值是空的
a: <a reference> // 函數(shù) a 的引用地址
b: undefiend // 見上文創(chuàng)建變量對象的第三步
}
根據(jù)步驟咬像，首先是 arguments 對象的創(chuàng)建；其次生宛，是檢查函數(shù)的聲明县昂，此時(shí)，函數(shù) a 聲明了兩次茅糜，后一次將覆蓋前一次七芭；最后，是檢查變量的聲明蔑赘，先聲明了變量 b狸驳，將它賦值為 undefined预明，接著遇到 a 的聲明，由于 a 已經(jīng)聲明為了一個(gè)函數(shù)耙箍，所以撰糠，此條聲明將會被忽略。
到此辩昆，變量對象的創(chuàng)建階段完成阅酪，接下來時(shí)執(zhí)行階段，我們一步一步來汁针。
執(zhí)行
console.log(a),我們知道术辐，此時(shí) a 是第二個(gè)函數(shù)，所以會輸出function a() {...}施无；執(zhí)行
console.log(b)辉词，不出我們所料，將會輸出undefined猾骡；執(zhí)行賦值操作：
b = 'bbbb'瑞躺；執(zhí)行
console.log(b)，此時(shí)兴想，b 已經(jīng)賦值幢哨，所以會輸出'bbbb'；執(zhí)行賦值操作：
a = 46;執(zhí)行
console.log(a)嫂便，此時(shí)捞镰，a 的值變?yōu)?46。執(zhí)行賦值操作：
b = 'hahahah'顽悼；執(zhí)行
console.log(b)曼振， b 已經(jīng)被重新賦值，輸出hahahah蔚龙。
由上面我們可以看到冰评，在執(zhí)行階段，變量對象是跟著代碼不斷變化的木羹，此時(shí)甲雅，我們把變量對象成為活動(dòng)對象。
執(zhí)行到最后一步時(shí)坑填，執(zhí)行上下文變成了這樣抛人。
// 執(zhí)行階段
EC = {
VO = {};
scopeChain: {};
}
// VO ---- AO
AO = {
argument: {...};
a: 46;
b: 'hahahah';
this: window;
}
以上，就是變量對象在代碼執(zhí)行前及執(zhí)行時(shí)的變化脐瑰。
剛開始就說過妖枚，這部分概念將會對你理解后面的知識有很大的幫助，所以剛開始接觸的話可能會有些晦澀苍在，建議就是認(rèn)真讀兩遍绝页，結(jié)合后面的知識荠商，經(jīng)常回過頭來看看续誉。
最后留一道題莱没，給大家作為練手，觀察觀察執(zhí)行上下文及變量對象的變化酷鸦。
console.log(a);
console.log(b);
var a = 4;
function a() {
console.log('我是a1');
b(3, 5);
}
var a = function a() {
console.log('我是a2');
b(3, 5);
}
var b = function (m, n) {
console.log(arguments);
console.log('b')
}
a();
