幾乎所有編程語言就是在變量中存儲值,並且能讀取和修改此值。事實上,在變量中存儲值和取出值的能力,給程序賦予了狀態。
如果沒有這樣的概念,一個程序雖然可以執行一些任務,但是它們將會受到極大的限制而且不會非常有趣。
但是這些變量該存儲在哪,又給如何讀取?爲了完成這個目標,需要制定一些規則,這個規則就是:作用域。
常見的作用域主要分爲幾個類型:全局作用域、函數作用域、塊狀作用域、動態作用域。
對象 | 類型 |
global/window | 全局作用域 |
function | 函數作用域(局部作用域) |
{} | 塊狀作用域 |
this | 動態作用域 |
如果一個 變量 或者其他表達式不在 “當前的作用域”,那麼JavaScript機制會繼續沿着作用域鏈上查找直到全局作用域(global或瀏覽器中的window)如果找不到將不可被使用。 作用域也可以根據代碼層次分層,以便子作用域可以訪問父作用域,通常是指沿着鏈式的作用域鏈查找,而不能從父作用域引用子作用域中的變量和引用
- 全局作用域
變量在函數或者代碼塊{ }外定義,即爲全局作用域。不過,在函數或者代碼塊{ }內未定義的變量也是擁有全局作用域的(不推薦)。
var carName = "Volvo";
//此處可以調用carName變量
function myFunction(){
//函數內可調用carName變量
}
上述代碼中變量carName就是在函數外定義的,它是擁有全局作用域的。這個變量可以在任意地方被讀取或者修改,當然如果變量在函數內沒有聲明(沒有使用 var 關鍵字),該變量依然爲全局變量。
//此處可以調用carName變量
function myFunction(){
carName = "Volvo";
//函數內可調用carName變量
}
以上實例中 carName 在函數內,但是擁有全局作用域,它將作爲 global 或者 window 的屬性存在。
在函數內部或代碼塊中沒有定義的變量實際上是作爲 window/global 的屬性存在,而不是全局變量。換句話說沒有使用 var 定義的變量雖然擁有全局作用域,但是它是可以被 delete 的,而全局變量不可以。
- 函數作用域
在函數內部定義的變量,就是局部作用域。函數作用域內,對外是封閉的,從外層的作用域無法直接訪問函數內部的作用域!
function bar(){
var testValue = 'inner';
}
console.log(testValue) //報錯:ReferenceError:testValue is not defined
如果想讀取函數內的變量,必須藉助 return 或者閉包。
function bar(value){
var testValue = 'inner';
return testValue+value;
}
console.log(bar('fun')) //"innerfun"
這是藉助return的方式,下面是閉包的方式:
function bar(value){
var testValue = 'inner';
var result = testValue+value;
function innser(){
return result
};
return innser();
}
console.log(bar('fun')) //"innerfun"
通俗的講,return 是函數對外交流的出口,而 return 可以返回的是函數,根據作用域的規則,函數內部的子函數是可以獲取函數作用域內的變量的。
說到這其實大家會想到嵌套函數的作用域問題,如果 inner 函數再嵌套函數呢?這就涉及到另一個概念:作用域鏈。
仔細觀察上圖,其實不難理解作用域鏈是什麼,因爲你可以按照原型鏈那樣去理解。任何一個作用域鏈都是一個堆棧,首先先把全局作用域壓入棧底,再按照函數的嵌套關係一次壓入堆棧。在執行的時候就按照這個作用域鏈尋找變量。
- 塊狀作用域
在其他編程語言中,塊狀作用域是很熟悉的概念,但是在JavaScript中不被支持,就像上述知識一樣,除了全局作用域就是函數作用域,一直沒有自己的塊狀作用域。在 ES6 中已經改變了這個現象,塊狀作用域得到普及。關於什麼是塊,只要認識
if(true){
let a = 1
console.log(a)
}
在這個代碼中,if 後 { } 就是“塊”,這個裏面的變量就是擁有這個塊狀作用域,按照規則,{ }之外是無法訪問這個變量的。ES6中的let。
- 動態作用域
在 JavaScript 中很多同學對 this 的指向時而清楚時而模糊,其實結合作用域會對 this 有一個清晰的理解。不妨先來看下這段代碼:
window.a = 3
function test () {
console.log(this.a)
}
test.bind({ a : 2 })() //2
test() //3
在這裏bind已經把作用域的範圍進行了修改指向了{ a:2},而 this 指向的是當前作用域對象,是不是可以清楚的理解了呢?
接下來我們再思考另一個問題:作用域是在代碼編寫的時候就已經決定了呢,還是在代碼執行的過程中才決定的?
var carName = "Volvo";
//此處可調用 carName 變量
function myFunction(){
//函數內可調用 carName 變量
}
在看看這段代碼,寫代碼的時候就知道 carName 就是全局作用域,函數內部的用 var 定義的變量就是函數作用域。這個也就是專業術語:詞法作用域。
通俗的講變量的作用域是在定義時決定而不是執行時決定,也就是說詞法作用域取決於源碼,通過靜態分析就能確定,因此詞法作用域也叫做靜態作用域。
相反,只能在執行階段才能決定變量的作用域,那就是動態作用域。
看看下面的代碼是遵循了動態作用域還是靜態作用域呢?
function foo(){
console.log(a) //2 (不是3!)
}
function bar(){
var a=3;
foo();
}
var a=2;
bar()
爲什麼會這樣?
如果按照動態作用域分析:當 foo() 不能爲 a 解析出一個變量引用時,它不會沿着嵌套的作用域鏈向上走一層,而是沿着調用棧向上走,以找到 foo() 是 從何處 被調用的。因爲 foo() 是從 bar() 中被調用的,它就會在 bar() 的作用域中檢查變量,並且在這裏找到持有值 3 的 a。
如果按照靜態作用域分析:foo執行的時候沒有找到 a 這個變量,它會按照代碼書寫的順序往上找,也就是 foo 定義的外層,就找到了 var a=2 ,而不是 foo 調用的 bar 內找。
所以結果就是 2。
從這個示例可以看出 JavaScript 默認採用詞法(靜態)作用域,如果要開啓動態作用域請藉助 bind、with、eval 等。