作用域(Scope)
什么是作用域
作用域是在運行時代碼中的某些特定部分中變量和媳，函數和對象的可訪問性格遭。換句話說，作用域決定了代碼區(qū)塊中變量和其他資源的可見性留瞳。
function outFun2() {
var inVariable = "內層變量2";
}
outFun2();//要先執(zhí)行這個函數拒迅，否則根本不知道里面是啥
console.log(inVariable); // Uncaught ReferenceError: inVariable is not defined
從上面的例子可以體會到作用域的概念，變量inVariable在全局作用域沒有聲明她倘，所以在全局作用域下取值會報錯璧微。我們可以這樣理解：作用域就是一個獨立的地盤，讓變量不會外泄硬梁、暴露出去前硫。也就是說作用域最大的用處就是隔離變量，不同作用域下同名變量不會有沖突荧止。
ES6 之前 JavaScript 沒有塊級作用域,只有全局作用域和函數作用域屹电。ES6的到來阶剑，為我們提供了‘塊級作用域’,可通過新增命令let和const來體現。
全局作用域和函數作用域
在代碼中任何地方都能訪問到的對象擁有全局作用域危号，一般來說以下幾種情形擁有全局作用域：
- 最外層函數和在最外層函數外面定義的變量擁有全局作用域
var outVariable = "我是最外層變量"; //最外層變量
function outFun() { //最外層函數
var inVariable = "內層變量";
function innerFun() { //內層函數
console.log(inVariable);
}
innerFun();
}
console.log(outVariable); //我是最外層變量
outFun(); //內層變量
console.log(inVariable); //inVariable is not defined
innerFun(); //innerFun is not defined
- 所有末定義直接賦值的變量自動聲明為擁有全局作用域
function outFun2() {
variable = "未定義直接賦值的變量";
var inVariable2 = "內層變量2";
}
outFun2();//要先執(zhí)行這個函數牧愁，否則根本不知道里面是啥
console.log(variable); //未定義直接賦值的變量
console.log(inVariable2); //inVariable2 is not defined
- 所有window對象的屬性擁有全局作用域
一般情況下，window對象的內置屬性都擁有全局作用域外莲，例如window.name猪半、window.location、window.top等等苍狰。
全局作用域有個弊端：如果我們寫了很多行JS代碼办龄，變量定義都沒有用函數包括，那么它們就全部都在全局作用域中淋昭。這樣就會 污染全局命名空間, 容易引起命名沖突俐填。
// 張三寫的代碼中
var data = {a: 100}
// 李四寫的代碼中
var data = {x: true}
這就是為何 jQuery、Zepto等庫的源碼翔忽，所有的代碼都會放在(function(){....})()中英融。因為放在里面的所有變量，都不會被外泄和暴露歇式，不會污染到外面驶悟，不會對其他的庫或者JS腳本造成影響。這是函數作用域的一個體現材失。
函數作用域是指聲明在函數內部的變量痕鳍，和全局作用域相反，局部作用域一般只在固定的代碼片段內可訪問到龙巨，最常見的例如函數內部笼呆。
function doSomething(){
var blogName="浪里行舟";
function innerSay(){
alert(blogName);
}
innerSay();
}
alert(blogName); //腳本錯誤
innerSay(); //腳本錯誤
作用域是分層的，內層作用域可以訪問外層作用域的變量旨别，反之則不行诗赌。
塊級作用域
塊級作用域可通過let和const聲明，所聲明的變量在指定塊的作用域外無法被訪問秸弛。塊級作用域在如下情況被創(chuàng)建：
- 在一個函數內部
- 在一個代碼塊（由一對花括號包裹）內部
塊級作用域有以下幾個特點：
- 聲明變量不會提升到代碼塊頂部
- 禁止重復聲明
- 循環(huán)中的綁定塊作用域的妙用
開發(fā)者可能最希望實現for循環(huán)的塊級作用域了铭若，因為可以把聲明的計數器變量限制在循環(huán)內，例如：
for (let i = 0; i < 10; i++) {
// ...
}
console.log(i);
// ReferenceError: i is not defined
上面代碼中递览，計數器i只在for循環(huán)體內有效叼屠，在循環(huán)體外引用就會報錯。
var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 10
上面代碼中绞铃，變量i是var命令聲明的环鲤，在全局范圍內都有效，所以全局只有一個變量i憎兽。每一次循環(huán)冷离，變量i的值都會發(fā)生改變，而循環(huán)內被賦給數組a的函數內部的console.log(i)纯命，里面的i指向的就是全局的i西剥。也就是說，所有數組a的成員里面的i亿汞，指向的都是同一個i瞭空，導致運行時輸出的是最后一輪的i的值，也就是 10疗我。
如果使用let咆畏，聲明的變量僅在塊級作用域內有效，最后輸出的是6吴裤。
var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 6
上面代碼中旧找，變量i是let聲明的，當前的i只在本輪循環(huán)有效麦牺，所以每一次循環(huán)的i其實都是一個新的變量钮蛛，所以最后輸出的是6。你可能會問剖膳，如果每一輪循環(huán)的變量i都是重新聲明的魏颓，那它怎么知道上一輪循環(huán)的值，從而計算出本輪循環(huán)的值吱晒？這是因為JavaScript引擎內部會記住上一輪循環(huán)的值甸饱，初始化本輪的變量i時，就在上一輪循環(huán)的基礎上進行計算仑濒。
另外叹话，for循環(huán)還有一個特別之處，就是設置循環(huán)變量的那部分是一個父作用域躏精，而循環(huán)體內部是一個單獨的子作用域渣刷。
for (let i = 0; i < 3; i++) {
let i = 'abc';
console.log(i);
}
// abc
// abc
// abc
上面代碼正確運行，輸出了3次abc矗烛。這表明函數內部的變量i與循環(huán)變量i不在同一個作用域辅柴，有各自單獨的作用域。
作用域鏈
當獲取某個變量時瞭吃，如果這個變量在當前作用域內沒有定義該變量碌嘀，就向向父級作用域尋找。如果父級也沒有歪架，就一層一層向上尋找股冗，直到找到全局作用域還是沒找到，就宣布放棄和蚪。這種一層一層的關系止状，就是作用域鏈 烹棉。
作用域與執(zhí)行上下文
我們知道JavaScript屬于解釋型語言，JavaScript的執(zhí)行分為：解釋和執(zhí)行兩個階段,這兩個階段所做的事并不一樣：
- 解釋階段：詞法分析怯疤、語法分析浆洗、作用域規(guī)則確定。
- 執(zhí)行階段：創(chuàng)建執(zhí)行上下文集峦、執(zhí)行函數代碼伏社、垃圾回收。
JavaScript解釋階段便會確定作用域規(guī)則塔淤，因此作用域在函數定義時就已經確定了摘昌，而不是在函數調用時確定，但是執(zhí)行上下文是函數執(zhí)行之前創(chuàng)建的高蜂。執(zhí)行上下文最明顯的就是this的指向是執(zhí)行時確定的聪黎。而作用域訪問的變量是編寫代碼的結構確定的。
作用域和執(zhí)行上下文之間最大的區(qū)別是：
執(zhí)行上下文在運行時確定妨马，隨時可能改變挺举；作用域在定義時就確定，并且不會改變烘跺。
一個作用域下可能包含若干個上下文環(huán)境湘纵。有可能從來沒有過上下文環(huán)境（函數從來就沒有被調用過）；有可能有過滤淳，現在函數被調用完畢后梧喷，上下文環(huán)境被銷毀了；有可能同時存在一個或多個（閉包）脖咐。同一個作用域下铺敌，不同的調用會產生不同的執(zhí)行上下文環(huán)境，繼而產生不同的變量的值屁擅。
