之前第一遍看javascript高級(jí)程序設(shè)計(jì)教程呛哟，看到函數(shù)作用域的概念叠荠，感覺(jué)終于可以解釋之前程序中出現(xiàn)的種種關(guān)于閉包，作用域的奇怪現(xiàn)象了扫责，這個(gè)假象一直維持到最近榛鼎。
you don't know js。
no,I think i know.
but the truth is: I really don't know
起源問(wèn)題
對(duì)我自己的困惑來(lái)自于這個(gè)問(wèn)題：
var a = 10;
function bar(){
console.log(a);
}
function foo(){
var a=5;
bar();
}
foo(); //10
bar作為內(nèi)部函數(shù)鳖孤，可以訪問(wèn)到外部變量a者娱，也就是foo中定義的a，所以應(yīng)該輸出5苏揣。然而結(jié)果是10黄鳍，道理很簡(jiǎn)單，只是當(dāng)時(shí)的我混淆了兩個(gè)概念腿准，執(zhí)行上下文和函數(shù)作用域际起。（個(gè)人認(rèn)為js高級(jí)程序設(shè)計(jì)中這兩個(gè)概念就混的很厲害）。
作用域的概念
es6之前吐葱，沒(méi)有塊級(jí)作用域街望，只有函數(shù)作用域和全局作用域。這里只討論es6之前的弟跑。函數(shù)的作用域在函數(shù)定義的時(shí)候就已經(jīng)決定了灾前，而不是在執(zhí)行的時(shí)候決定。也就是說(shuō)孟辑，上面的bar函數(shù)在定義的時(shí)候哎甲，它的作用域就已經(jīng)確定了蔫敲，在該函數(shù)內(nèi)部能夠訪問(wèn)到的變量就是它自己定義的變量和上一層作用域中的變量。
執(zhí)行上下文
js代碼都是運(yùn)行在執(zhí)行上下文中的炭玫，最開(kāi)始奈嘿，程序直接進(jìn)入全局的執(zhí)行上下文（也就是window,或者node里面的global），如果碰到函數(shù)function1的執(zhí)行（不是定義）吞加，就進(jìn)入函數(shù)的執(zhí)行上下文裙犹。在函數(shù)執(zhí)行之前，要做以下幾件事來(lái)決定函數(shù)對(duì)變量的訪問(wèn)權(quán)衔憨。
- 一個(gè)指針指向function1的作用域鏈叶圃，作用域鏈中的變量都可以進(jìn)行訪問(wèn)，優(yōu)先級(jí)由內(nèi)至外践图。
- 創(chuàng)建一個(gè)variable object掺冠，也就是變量對(duì)象。這個(gè)變量里面的屬性存儲(chǔ)遵循下面幾個(gè)原則：
- 先給變量對(duì)象建立一個(gè)arguments對(duì)象码党，如果函數(shù)調(diào)用時(shí)傳入了變量德崭，則初始化為那個(gè)變量，如果變量未傳入闽瓢，則初始化為undefined,如果是函數(shù)接癌，則傳遞一個(gè)指向函數(shù)的指針心赶，同時(shí)arguments還具有callee,length等屬性也一并創(chuàng)建好
- 掃描當(dāng)前函數(shù)里面的聲明語(yǔ)句扣讼，如果找到了函數(shù)聲明語(yǔ)句，就給變量對(duì)象中增加一個(gè)以函數(shù)名為屬性名缨叫，指向函數(shù)的指針作為屬性值椭符。如果有重復(fù)的，直接屬性值替換耻姥。
- 如果找到了變量聲明語(yǔ)句销钝，判斷變量名是否已經(jīng)存在在變量對(duì)象中的屬性，則直接忽略琐簇，如果不存在蒸健，就新增一個(gè)屬性，初始化為undefined
- 確定this的指向
關(guān)于變量對(duì)象是否會(huì)合并到自己的作用域鏈上婉商，js高級(jí)程序設(shè)計(jì)中是將變量對(duì)象作為最高級(jí)的作用域似忧，外層作為下一個(gè)作用域進(jìn)而構(gòu)成一個(gè)作用域鏈，我認(rèn)為是否合并不重要丈秩，重要的是變量對(duì)象的優(yōu)先級(jí)最高
當(dāng)上述行為完成之后盯捌，才開(kāi)始執(zhí)行代碼。能夠訪問(wèn)到上述出現(xiàn)的所有代碼蘑秽，變量對(duì)象中的優(yōu)先級(jí)最高饺著，函數(shù)作用域鏈上越近優(yōu)先級(jí)越高箫攀。
舉個(gè)例子更實(shí)在一點(diǎn)：
function foo(i) {
var a = 'hello';
var b = function privateB() {
};
function c() {
}
}
foo(22);
上述代碼執(zhí)行前，會(huì)做上述的3件事幼衰，之后靴跛，它的執(zhí)行上下文對(duì)應(yīng)的一個(gè)變量看起來(lái)是這樣子：
fooExecutionContext = {
scopeChain: { 全局變量們，foo },
variableObject: {
arguments: {
0: 22,
length: 1
},
i: 22,
a: undefined,
b: undefined
c: pointer to function c()
},
this: { window(瀏覽器) or undefined(node)}
}
執(zhí)行上下文是存儲(chǔ)在棧的渡嚣，也就是說(shuō)汤求，當(dāng)前上下文執(zhí)行過(guò)程中，遇到新的函數(shù)要執(zhí)行严拒， 就將新的執(zhí)行上下文放入棧頂扬绪，決定了新的函數(shù)的執(zhí)行上下文，執(zhí)行結(jié)束之后出站裤唠，回復(fù)之前的執(zhí)行上下文挤牛，從而在之前的執(zhí)行上下文中繼續(xù)執(zhí)行。舉個(gè)例子：
var a=10;
function bar(){
console.log(a)//undefined
var a=5;
function foo(){
a=3;
console.log(a);//3
}
foo();
console.log(a);//3
}
bar();
console.log(a)种蘸；//10
當(dāng)前函數(shù)開(kāi)始運(yùn)行墓赴，構(gòu)建全局執(zhí)行上下文，遇到bar()航瞭，要開(kāi)啟一個(gè)新的上下文并進(jìn)行堆棧诫硕，執(zhí)行上述的3件事之后，新的上下文看起來(lái)像這樣：
barFunctionContext{
scopechain{全局的:可以訪問(wèn)到bar,a}
variable object{
arguments:{
length:0,
callee:(bar)
},
a:undefined,
foo: 指向函數(shù)的指針(此時(shí)foo輸出就是該函數(shù)),
}
this: window in browser or undefined in node
}
所以在執(zhí)行的過(guò)程中刊侯，console.log(a)就會(huì)從當(dāng)前的執(zhí)行上下文中尋找a章办，進(jìn)而輸出undefined，而遇到a=5的時(shí)候滨彻，改變執(zhí)行上下文中的a為5藕届，當(dāng)遇到foo()時(shí)，新建一個(gè)執(zhí)行上下文亭饵，經(jīng)過(guò)上面三件事之后休偶，新的執(zhí)行上下文大概像這樣：
fooFunctionContext{
scopechain{bar的執(zhí)行上下文(a已經(jīng)修改成5，別的不變)}
variable object{
arguments:{
length:0,
callee:(foo)
},
}
this: window in browser or undefined in node
}
所以修改a的時(shí)候會(huì)從當(dāng)前變量對(duì)象中查找辜羊，沒(méi)有踏兜，就去作用域鏈中查找，在bar中的執(zhí)行上下文中發(fā)現(xiàn)了a八秃，修改a 的數(shù)值碱妆，然后輸出3.接下來(lái)執(zhí)行上下文出站，繼續(xù)在bar的上下文中執(zhí)行喜德，console.log(a)山橄，已經(jīng)被修改，輸出3.bar執(zhí)行上下文出站，執(zhí)行console.log(a)航棱，此時(shí)是全局的a睡雇，也就是10。
總結(jié)
- 執(zhí)行上下文采取堆棧的形式饮醇，這樣才可以遞歸它抱，函數(shù)嵌套而不會(huì)混亂
- 執(zhí)行上下文的構(gòu)建基本采用上述的3件事，之后才會(huì)去執(zhí)行代碼朴艰，這也是變量名提升的根本原因
- 理解了執(zhí)行上下文观蓄，才能對(duì)js的一些復(fù)雜功能，閉包祠墅，柯里化（函數(shù)嵌套）真正理解
上述的文字大部分是看了下面的英文文獻(xiàn)之后自己理解的侮穿，英文文獻(xiàn)中還有很多的輔助圖可以參考。理解的不到位的地方還請(qǐng)指出毁嗦。
