在之前的介紹中,我們已經知道 Javascript 沒有塊級作用,只有函數級作用域。
代碼如下:
function test() { // a scope
for(var i = 0; i < 10; i++) { // not a scope
// count
}
console.log(i); // 10
}
Javascript 中也沒有顯示的命名空間,這就意味著一切都定義在全局作用域中。每一次引用一個變量時,Javascript 會往上遍歷整個全局作用域直到找到該變量。如果遍歷完整個全局作用域仍然沒有找到該變量,則拋出一個 ReferenceError 錯誤。
請輸入圖片描述
隱式全局變量
代碼如下:
// script A
foo = '42';
// script B
var foo = '42'
上面的兩個例子產生不一樣的效果。第一個將在全局作用域中定義變量 foo,而第二個則在當前作用域定義變量 foo。
我們一定要注意,如果不使用關鍵字 var 將會帶來意想不到的影響。
代碼如下:
// global scope
var foo = 42;
function test() {
// local scope
foo = 21;
}
test();
foo; // 21
由於在函數 test 內沒用 var 來定義變量 foo,所以將覆蓋函數外部的全局變量 foo。盡管看上去不是什麼大問題,但是如果有成千上萬行代碼時,這將是個難以追蹤的 bug。
代碼如下:
// global scope
var items = [/* some list */];
for(var i = 0; i < 10; i++) {
subLoop();
}
function subLoop() {
// scope of subLoop
for(i = 0; i < 10; i++) { // missing var statement
// do amazing stuff!
}
}
上例中,外部的循環將會在執行第一次的時候就停止,這是因為 subloop 函數內部的變量 i 將會覆蓋外部的全局變量 i。我們只需要在函數內部加上一個 var 就可以避免這個錯誤,所以我們在定義變量時一定不要忘記加上關鍵字 var。除非我們確實希望對外部的全局變量造成影響。
局部變量
Javascript 中局部變量只可以通過兩個方式產生,一是通過關鍵字 var 來聲明,一是作為函數的形參。
代碼如下:
// global scope
var foo = 1;
var bar = 2;
var i = 2;
function test(i) {
// local scope of the function test
i = 5;
var foo = 3;
bar = 4;
}
test(10);
此時,函數 test 內部的變量 i 和 foo 是局部變量,而 bar 則會覆蓋外部的全局變量 bar。
提升(Hoisting)
Javascript 將會提升變量聲明,這就意味著 var 表達式和函數聲明都將被提升到作用域的頂部。
代碼如下:
bar();
var bar = function() {};
var someValue = 42;
test();
function test(data) {
if (false) {
goo = 1;
} else {
var goo = 2;
}
for(var i = 0; i < 100; i++) {
var e = data[i];
}
}
上面的代碼在運行之前, var 表達式和函數 test 的聲明都將提升至頂部,因此程序將正常運行並不會報錯。
代碼如下:
// var statements got moved here
var bar, someValue; // default to 'undefined'
// the function declaration got moved up too
function test(data) {
var goo, i, e; // missing block scope moves these here
if (false) {
goo = 1;
} else {
goo = 2;
}
for(i = 0; i < 100; i++) {
e = data[i];
}
}
bar(); // fails with a TypeError since bar is still 'undefined'
someValue = 42; // assignments are not affected by hoisting
bar = function() {};
test();
由於 Javascript 沒有塊級作用域,這不僅將提升 var 表達式,同時也會使得 if 結構變得不夠直觀。
在上例中,盡管看上去 if 在對全局變量 goo 進行操作,實際上,由於變量 goo 被提升,所以修改的是局部變量。
如果沒有對提升規則有所了解,你可能會認為下面的代碼將會拋出 ReferenceError 錯誤。
代碼如下:
// check whether SomeImportantThing has been initialized
if (!SomeImportantThing) {
var SomeImportantThing = {};
}
當然上面的代碼是沒有錯誤的,因為在代碼在運行前,var 表達式已經被提升到頂部。
代碼如下:
var SomeImportantThing;
// other code might initialize SomeImportantThing here, or not
// make sure it's there
if (!SomeImportantThing) {
SomeImportantThing = {};
}
這裡要推薦下 @nightire 凡哥的博文 《理解 JavaScript(二)》,裡面對提升的講解非常透徹。
名稱解析順序
當嘗試在一個函數作用域內訪問一個 foo 變量時,Javascript 將會按照下面的順序查找:
當前作用域內是否有 var foo 的定義。
函數形參中是否有 foo 變量。
函數自身的名稱是否為 foo。
跳到外層定義域,再從第一部開始查找起。
命名空間
一個最常見的問題就是命名沖突,這是因為 Javascript 只有一個全局作用域所帶來的。但這個問題可以通過匿名的外部函數解決。
代碼如下:
(function() {
// a self contained "namespace"
window.foo = function() {
// an exposed closure
};
})(); // execute the function immediately
上例中的匿名函數被認為是表達式,所以它們會被執行。
代碼如下:
( // evaluate the function inside the parentheses
function() {}
) // and return the function object
() // call the result of the evaluation
當然我們也可以用其他方式來調用函數表達式,不同的結構,但是同樣的效果。
代碼如下:
// A few other styles for directly invoking the
!function(){}()
+function(){}()
(function(){}());
// and so on...
總結
建議大家使用匿名的外部函數來將代碼封裝到空間內,這樣不僅可以解決命名空間的沖突,同時也有利於程序的模塊化。
此外,使用全局變量不是一個好習慣,這將帶來高成本的維護代價而且容易產生錯誤。
命名空間同類型、函數、變量、模板等都屬於實體(entity)。
實體的主要的共性是,可以具有名稱。(此外,標簽也可以具有名稱,但它不是實體。)
而命名空間作用域是作用域中的一類統稱,和塊作用域、類作用域、函數原型作用域、函數作用域(僅對標簽有效)並列。命名空間內聲明的名稱在命名空間作用域中。全局名稱被認為在隱含的全局命名空間作用域中。
命名空間作用確實就是作用域,但是,他又不同於簡單的作用域,你可以分多次在多處聲明同一個命名空間,但是裡面的內容不能重定義,他們最終都會合成一個命名空間,就像std,到處宏定義