作用域鏈
作用域(scope)作用域是程序源代碼中定義變量的區(qū)域苏揣，規(guī)定了當前執(zhí)行代碼對變量和函數(shù)可訪問的范圍捐腿。
ES6之前只有全局作用域和函數(shù)作用域胚股，沒有塊級作用域。
JavaScript采用靜態(tài)作用域捞奕。
var value = 1;
function foo() {
console.log(value);
}
function bar() {
var value = 2;
foo();
}
bar(); // 1
// 當采用靜態(tài)作用域時，在調(diào)用foo時拄轻，先從foo函數(shù)內(nèi)部查找是否有局部變量value
// 如果沒有颅围，就在foo被定義的位置(不是調(diào)用時位置)，查找上一層的代碼(全局作用域)
查找變量時恨搓，先從當前上下文的變量對象中查找院促，如果沒找到就到父級(詞法層面的父級)執(zhí)行上下文的變量對象中查找，一直到全局上下文的變量對象斧抱，也就是是全局對象常拓，這樣由多個執(zhí)行上下文的變量對象構(gòu)成的鏈表就是作用域鏈(scope chain)。
變量查找也包括原型鏈查找辉浦。
函數(shù)創(chuàng)建
函數(shù)的作用域在函數(shù)創(chuàng)建時已確定弄抬，函數(shù)在創(chuàng)建時有一個內(nèi)部屬性[[scope]]，保存了所有父級變量對象在其中宪郊，可以把[[scope]理解為所有父級變量對象的層級鏈(注意：[[scope]]并不代表完整的作用域鏈掂恕！)。
在函數(shù)作用域中所定義的變量和內(nèi)部函數(shù)在函數(shù)外邊是不能直接訪問到的废膘，而且并不會污染全局變量對象竹海。
函數(shù)激活
函數(shù)被調(diào)用時，進入函數(shù)上下文丐黄，創(chuàng)建VO/AO斋配，將活動對象添加到作用域的前端。
此時執(zhí)行上下文的作用域鏈可以表示為：
Scope = [AO].concat([[Scope]]);
var x = 10;
function foo () {
console.log(x);
}
function fun () {
var x = 20;
var bar = foo;
bar();
}
fun(); // 是10灌闺，而不是20
// 進入全局環(huán)境艰争，創(chuàng)建變量對象，執(zhí)行代碼
globalContext.VO = {
foo: <foo reference>,
fun: <fun reference>,
x: 10
};
// 函數(shù)foo()創(chuàng)建時桂对，[[scope]]保存父級作用域鏈
foo.[[scope]] = [globalContext.VO]
// 函數(shù)fun()創(chuàng)建時甩卓，[[scope]]保存父級作用域鏈
fun.[[scope]] = [globalContext.VO]
// 函數(shù)fun()調(diào)用時，funContext壓入執(zhí)行上下文棧
ECStack = [
funContext,
globalContext
];
// 創(chuàng)建funContext蕉斜，1.復制fun函數(shù)[[scope]]屬性逾柿，初始化作用域鏈
funContext = {
Scope: fun.[[scope]],
};
// 創(chuàng)建funContext，2.創(chuàng)建活動變量宅此，arguments机错，函數(shù)聲明，變量聲明
funContext = {
AO: {
arguments: {length: 0},
x: undefined,
bar: undefined
}
};
// 創(chuàng)建funContext父腕，3.將活動對象壓入fun作用域頂端
funContext = {
AO: {
arguments: {length: 0},
x: undefined,
bar: undefined
},
Scope: [AO, fun.[[Scope]]]
};
// funContext創(chuàng)建完成弱匪，執(zhí)行代碼修改AO屬性值
funContext = {
AO: {
arguments: {length: 0},
x: 20,
bar: <foo reference>
},
Scope: [AO, globalContext.VO]
};
// 調(diào)用bar()，引用地址指向foo()璧亮，fooContext壓入執(zhí)行上下文棧
ECStack = [
fooContext,
funContext,
globalContext
];
// 創(chuàng)建fooContext：
// 1.復制fun函數(shù)[[scope]]屬性萧诫，初始化作用域鏈
// 2.創(chuàng)建活動對象斥难，arguments，函數(shù)聲明帘饶，變量聲明
// 3.將活動對象壓入foo作用域頂端
fooContext = {
AO: {
arguments: {length: 0},
},
Scope: [AO, foo.[[Scope]]]
};
// fooContext初始化完成哑诊，執(zhí)行代碼修改AO屬性值
fooContext = {
AO: {
arguments: {length: 0},
},
Scope: [AO, globalContext.VO]
};
// 在foo函數(shù)中執(zhí)行console.log(x)語句，查找變量x;
fooContext.AO; // not found
fooContext.Scope -> globalContext.VO -> x = 10 // found
閉包
閉包(Closures)是指有權(quán)訪問另一個函數(shù)作用域中的變量的函數(shù)及刻。
創(chuàng)建閉包的常見形式就是在一個函數(shù)內(nèi)部創(chuàng)建另一個函數(shù)搭儒，內(nèi)部函數(shù)在執(zhí)行的時候，訪問了外部函數(shù)的變量對象提茁。此時，外部函數(shù)就是閉包馁菜。
var name = "Tom";
function getName(){
var name = "Leo";
function fn(){
console.log(name);
}
return fn;
}
var foo = getName(); //執(zhí)行g(shù)etName函數(shù),講返回結(jié)果fn函數(shù)的引用賦值給foo
foo(); // Leo
// 1.執(zhí)行g(shù)etName函數(shù)茴扁，創(chuàng)建getName函數(shù)執(zhí)行上下文，getName執(zhí)行上下文進棧
// 2.getName執(zhí)行上下文初始化汪疮，創(chuàng)建變量對象峭火、作用域鏈、this等
// 3.getName函數(shù)執(zhí)行完畢智嚷，返回fn函數(shù)引用卖丸，getName執(zhí)行上下文出棧
// 4.執(zhí)行fn函數(shù)，創(chuàng)建fn函數(shù)執(zhí)行上下文盏道，fn執(zhí)行上下文進棧
// 5.fn執(zhí)行上下文初始化稍浆，創(chuàng)建變量對象、作用域鏈猜嘱、this等
// 6.執(zhí)行fn中代碼衅枫，查找變量name，fnContext.AO中沒有朗伶，在作用域鏈中查找
// 7.fnContext = {
Scope: [AO, getNameContext.AO, globalContext.VO],
}
// 8.在getNameContext.AO中找到變量name弦撩，不再向上查找，輸出name="Leo"论皆。
// 雖然fn在執(zhí)行時益楼，getNameContext已出棧(銷毀)，但getNameContext.AO還在內(nèi)存中
// 這是因為fn的作用域鏈會引用這個活動對象点晴，直到fn被銷毀感凤，getNameContext.AO才會被銷毀
// 這種執(zhí)行上下文已銷毀，但它的子執(zhí)行上下文依舊可以引用該上下文的變量的機制就形成了閉包觉鼻。
通過閉包可以保存整個變量對象俊扭，但是只能取得變量的最后一個值。
var data = [];
for (var i = 0; i < 3; i++) {
data[i] = function () {
console.log(i);
};
}
data[0](); // 3
data[1](); // 3
data[2](); // 3
// 當執(zhí)行data[0]函數(shù)的時候坠陈，全局變量i為3
// 此時萨惑，data[0]函數(shù)的作用域鏈為：
data[0]Context = {
Scope: [AO, globalContext.VO]
}
// data[0]Context的AO沒有i的值捐康，所以會從globalContext.VO中查找，此時i=3
// data[0],data[2]同理
// 期望依次輸出0,1,2
// 使用一個立即執(zhí)行函數(shù)庸蔼，參數(shù)num接收傳入的變量i
var data = [];
for (var i = 0; i < 3; i++) {
data[i] = (function (num) {
return function(){
console.log(num);
}
})(i);
}
data[0](); // 0
data[1](); // 1
data[2](); // 2
// 在執(zhí)行data[0]函數(shù)時解总，data[0]函數(shù)的作用域鏈為：
data[0]Context = {
Scope: [AO, 匿名函數(shù)Context.AO,globalContext.VO]
}
// 匿名函數(shù)Context.AO = {
arguments: {
0: 0,
length: 1
}，
num：0 // 將變量i的當前值賦值給參數(shù)num
}
// data[0]Context的AO沒有num值姐仅，沿著作用域鏈從匿名函數(shù)Context.AO中查找花枫，找到num=0
只有內(nèi)部函數(shù)訪問了上層作用域鏈中的變量對象時，才會形成閉包掏膏，且與作用域鏈的訪問順序有關(guān)劳翰。
function fn1() {
var a = 1;
return function fn2() {
var b = 2;
return function fn3() {
// console.log(a);//1 閉包是fn1
// console.log(b);//2 閉包是fn2
console.log(a,b);//1 2 閉包是fn1 fn2
}
}
}
var fn2 = fn1();
var fn3 = fn2();
fn3();
參考資料：
《JavaScript高級程序設(shè)計》
《JavaScript 標準參考教程》
湯姆大叔-深入理解JavaScript系列
