前言
JavaScript中有一個被稱爲作用域(Scope)的特性。雖然對於許多新手開發者來說,作用域的概念並不是很容易理解,本文我會盡我所能用最簡單的方式來解釋作用域和作用域鏈,希望大家有所收穫!
作用域(Scope)
1.什麼是作用域
作用域是在運行時代碼中的某些特定部分中變量,函數和對象的可訪問性。換句話說,作用域決定了代碼區塊中變量和其他資源的可見性。可能這兩句話並不好理解,我們先來看個例子:
function outFun2() {
var inVariable = "內層變量2";
}
outFun2();//要先執行這個函數,否則根本不知道里面是啥
console.log(inVariable); // Uncaught ReferenceError: inVariable is not defined
從上面的例子可以體會到作用域的概念,變量inVariable在全局作用域沒有聲明,所以在全局作用域下取值會報錯。我們可以這樣理解:作用域就是一個獨立的地盤,讓變量不會外泄、暴露出去。也就是說作用域最大的用處就是隔離變量,不同作用域下同名變量不會有衝突。
ES6 之前 JavaScript 沒有塊級作用域,只有全局作用域和函數作用域。ES6的到來,爲我們提供了‘塊級作用域’,可通過新增命令let和const來體現。
2.全局作用域和函數作用域
在代碼中任何地方都能訪問到的對象擁有全局作用域,一般來說以下幾種情形擁有全局作用域:
- 最外層函數 和在最外層函數外面定義的變量擁有全局作用域
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();//要先執行這個函數,否則根本不知道里面是啥
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(); //腳本錯誤
作用域是分層的,內層作用域可以訪問外層作用域的變量,反之則不行。我們看個例子,用泡泡來比喻作用域可能好理解一點:
最後輸出的結果爲 2, 4, 12
- 泡泡1是全局作用域,有標識符foo;
- 泡泡2是作用域foo,有標識符a,bar,b;
- 泡泡3是作用域bar,僅有標識符c。
值得注意的是:塊語句(大括號“{}”中間的語句),如 if 和 switch 條件語句或 for 和 while 循環語句,不像函數,它們不會創建一個新的作用域。在塊語句中定義的變量將保留在它們已經存在的作用域中。
if (true) {
// 'if' 條件語句塊不會創建一個新的作用域
var name = 'Hammad'; // name 依然在全局作用域中
}
console.log(name); // logs 'Hammad'
JS 的初學者經常需要花點時間才能習慣變量提升,而如果不理解這種特有行爲,就可能導致
bug 。正因爲如此, ES6 引入了塊級作用域,讓變量的生命週期更加可控。
3.塊級作用域
塊級作用域可通過新增命令let和const聲明,所聲明的變量在指定塊的作用域外無法被訪問。塊級作用域在如下情況被創建:
- 在一個函數內部
- 在一個代碼塊(由一對花括號包裹)內部
let 聲明的語法與 var 的語法一致。你基本上可以用 let 來代替 var 進行變量聲明,但會將變量的作用域限制在當前代碼塊中。塊級作用域有以下幾個特點:
- 聲明變量不會提升到代碼塊頂部
let/const 聲明並不會被提升到當前代碼塊的頂部,因此你需要手動將 let/const 聲明放置到頂部,以便讓變量在整個代碼塊內部可用。
function getValue(condition) {
if (condition) {
let value = "blue";
return value;
} else {
// value 在此處不可用
return null;
}
// value 在此處不可用
}
- 禁止重複聲明
如果一個標識符已經在代碼塊內部被定義,那麼在此代碼塊內使用同一個標識符進行 let 聲明就會導致拋出錯誤。例如:
var count = 30;
let count = 40; // Uncaught SyntaxError: Identifier 'count' has already been declared
在本例中, count 變量被聲明瞭兩次:一次使用 var ,另一次使用 let 。因爲 let 不能在同一作用域內重複聲明一個已有標識符,此處的 let 聲明就會拋出錯誤。但如果在嵌套的作用域內使用 let 聲明一個同名的新變量,則不會拋出錯誤。
var count = 30;
// 不會拋出錯誤
if (condition) {
let count = 40;
// 其他代碼
}
- 循環中的綁定塊作用域的妙用
開發者可能最希望實現for循環的塊級作用域了,因爲可以把聲明的計數器變量限制在循環內,例如:
for (let i = 0; i < 10; i++) {
// ...
}
console.log(i);
// ReferenceError: i is not defined
上面代碼中,計數器i只在for循環體內有效,在循環體外引用就會報錯。
var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 10
上面代碼中,變量i是var命令聲明的,在全局範圍內都有效,所以全局只有一個變量i。每一次循環,變量i的值都會發生改變,而循環內被賦給數組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只在本輪循環有效,所以每一次循環的i其實都是一個新的變量,所以最後輸出的是6。你可能會問,如果每一輪循環的變量i都是重新聲明的,那它怎麼知道上一輪循環的值,從而計算出本輪循環的值?這是因爲 JavaScript 引擎內部會記住上一輪循環的值,初始化本輪的變量i時,就在上一輪循環的基礎上進行計算。
另外,for循環還有一個特別之處,就是設置循環變量的那部分是一個父作用域,而循環體內部是一個單獨的子作用域。
for (let i = 0; i < 3; i++) {
let i = 'abc';
console.log(i);
}
// abc
// abc
// abc
上面代碼正確運行,輸出了 3 次abc。這表明函數內部的變量i與循環變量i不在同一個作用域,有各自單獨的作用域。
作用域鏈
1.什麼是自由變量
首先認識一下什麼叫做 自由變量 。如下代碼中,console.log(a)
要得到a變量,但是在當前的作用域中沒有定義a(可對比一下b)。當前作用域沒有定義的變量,這成爲 自由變量 。自由變量的值如何得到 —— 向父級作用域尋找(注意:這種說法並不嚴謹,下文會重點解釋)。
var a = 100
function fn() {
var b = 200
console.log(a) // 這裏的a在這裏就是一個自由變量
console.log(b)
}
fn()
2.什麼是作用域鏈
如果父級也沒呢?再一層一層向上尋找,直到找到全局作用域還是沒找到,就宣佈放棄。這種一層一層的關係,就是 作用域鏈 。
var a = 100
function F1() {
var b = 200
function F2() {
var c = 300
console.log(a) // 自由變量,順作用域鏈向父作用域找
console.log(b) // 自由變量,順作用域鏈向父作用域找
console.log(c) // 本作用域的變量
}
F2()
}
F1()
3.關於自由變量的取值
關於自由變量的值,上文提到要到父作用域中取,其實有時候這種解釋會產生歧義。
var x = 10
function fn() {
console.log(x)
}
function show(f) {
var x = 20
(function() {
f() //10,而不是20
})()
}
show(fn)
在fn函數中,取自由變量x的值時,要到哪個作用域中取?——要到創建fn函數的那個作用域中取,無論fn函數將在哪裏調用。
所以,不要在用以上說法了。相比而言,用這句話描述會更加貼切:要到創建這個函數的那個域”。
作用域中取值,這裏強調的是“創建”,而不是“調用”,切記切記——其實這就是所謂的"靜態作用域"
var a = 10
function fn() {
var b = 20
function bar() {
console.log(a + b) //30
}
return bar
}
var x = fn(),
b = 200
x() //bar()
fn()返回的是bar函數,賦值給x。執行x(),即執行bar函數代碼。取b的值時,直接在fn作用域取出。取a的值時,試圖在fn作用域取,但是取不到,只能轉向創建fn的那個作用域中去查找,結果找到了,所以最後的結果是30
作用域與執行上下文
許多開發人員經常混淆作用域和執行上下文的概念,誤認爲它們是相同的概念,但事實並非如此。
我們知道JavaScript屬於解釋型語言,JavaScript的執行分爲:解釋和執行兩個階段,這兩個階段所做的事並不一樣:
解釋階段:
- 詞法分析
- 語法分析
- 作用域規則確定
執行階段:
- 創建執行上下文
- 執行函數代碼
- 垃圾回收
JavaScript解釋階段便會確定作用域規則,因此作用域在函數定義時就已經確定了,而不是在函數調用時確定,但是執行上下文是函數執行之前創建的。執行上下文最明顯的就是this的指向是執行時確定的。而作用域訪問的變量是編寫代碼的結構確定的。
作用域和執行上下文之間最大的區別是:
執行上下文在運行時確定,隨時可能改變;作用域在定義時就確定,並且不會改變。
一個作用域下可能包含若干個上下文環境。有可能從來沒有過上下文環境(函數從來就沒有被調用過);有可能有過,現在函數被調用完畢後,上下文環境被銷燬了;有可能同時存在一個或多個(閉包)。同一個作用域下,不同的調用會產生不同的執行上下文環境,繼而產生不同的變量的值。