Javascript學習筆記之函數篇（六） : 作用域與命名空間_基礎知識

在先前的介紹中，我們已經知道 Javascript 沒有區塊級作用，只有函數級作用域。

複製程式碼 程式碼如下:

function test() { // a scope
    for(var i = 0; i         // 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     subLoop();
}
function subLoop() {
    // scope of subLoop
    for(i = 0; i         // 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         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         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，到處宏定義