6句話理解JavaScript範圍

標籤：opened   順序   函數嵌套   語言   編程   asc   png   編譯   sof   

一、“JavaScript中無塊級範圍”

在Java和C#中存在塊級範圍，即：大括弧也是一個範圍

public static void main (){    if(1==1){        String name = "seven";    }    System.out.println(name);}// 報錯

Java

public static void Main(){    if(1==1){        string name = "seven";    }    Console.WriteLine(name);}// 報錯

C#

在JavaScript語言中無塊級範圍

function Main(){    if(1==1){        var name = ‘seven‘;    }    console.log(name);}// 輸出： seven

補充：標題之所以添加雙引號是因為JavaScript6中新引入了let關鍵字，用於指定變數屬於塊級範圍。

二、JavaScript採用函數範圍

在JavaScript中每個函數作為一個範圍，在外部無法訪問內部範圍中的變數

function Main(){    var innerValue = ‘seven‘;} Main(); console.log(innerValue); // 報錯：Uncaught ReferenceError: innerValue is not defined

三、JavaScript的範圍鏈

由於JavaScript中的每個函數作為一個範圍，如果出現函數嵌套函數，則就會出現範圍鏈

xo = ‘alex‘;  function Func(){    var xo = "seven";    function inner(){        var xo = ‘alvin‘;        console.log(xo);    }    inner();}Func();

如上述代碼則出現三個範圍組成的範圍，如果出現範圍後，那麼尋找變數的時候，對於上述執行個體：

當執行console.log(xo)時，其尋找順序為根據範圍鏈從內到外的優先順序尋找，如果內層沒有就逐步向上找，知道沒

找到拋出異常。

四、JavaScript的範圍鏈執行前已建立

JavaScript的範圍在被執行前就已經建立，日後再去執行時只需要按照範圍鏈去尋找即可。

樣本一：

xo = ‘alex‘; function Func(){    var xo = "seven";    function inner(){         console.log(xo);    }    return inner;} var ret = Func();ret();// 輸出結果： seven

上述代碼，在函數被調用之前範圍鏈已經存在：

• 全域範圍 -> Func函數範圍 -> inner函數範圍

當執行【ret();】時，由於其代指的是inner函數，此函數的範圍鏈在執行之前已經被定義為：全域範圍 -> Func函數範圍 -> inner函數範圍，所以，

在執行【ret();】時，會根據已經存在的範圍鏈去尋找變數。

樣本二：

xo = ‘alex‘; function Func(){    var xo = "eirc";    function inner(){         console.log(xo);    }    xo = ‘seven‘;    return inner;} var ret = Func();ret();// 輸出結果： seven　

上述代碼和樣本一的目的相同，也是強調在函數被調用之前範圍鏈已經存在：

• 全域範圍 -> Func函數範圍 -> inner函數範圍

不同的時，在執行【var ret = Func();】時，Func範圍中的xo變數的值已經由 “eric” 被重設為 “seven”，所以之後再執行【ret();】時，就只能找到“seven”。

樣本三：

xo = ‘alex‘;<br>function Bar(){    console.log(xo);} function Func(){    var xo = "seven";         return Bar;} var ret = Func();ret();// 輸出結果： alex　

上述代碼，在函數被執行之前已經建立了兩條範圍鏈：

• 全域範圍 -> Bar函數範圍
• 全域範圍 -> Func函數範圍

當執行【ret();】時，ret代指的Bar函數，而Bar函數的範圍鏈已經存在：全域範圍 -> Bar函數範圍，所以，執行時會根據已經存在的範圍鏈去尋找。

五、聲明提前

在JavaScript中如果不建立變數，直接去使用，則報錯：

console.log(xxoo);// 報錯：Uncaught ReferenceError: xxoo is not defined

JavaScript中如果建立值而不賦值，則該值為undefined，如：

var xxoo;console.log(xxoo);// 輸出：undefined

在函數內如果這麼寫：

function Foo(){    console.log(xo);    var xo = ‘seven‘;} Foo();// 輸出：undefined

上述代碼，不報錯而是輸出 undefined，其原因是：JavaScript的函數在被執行之前，會將其中的變數全部聲明，而不賦值。所以，相當於上述執行個體中，函

在“先行編譯”時，已經執行了var xo；所以上述代碼中輸出的是undefined。　　

六、“全域範圍”

　　在JavaScript中有一種特殊的對象稱為全域對象。在瀏覽器中對應的是window對象。由於全域對象的所有屬性在任何地方都是可見的，所以這個對象又稱為全域範圍，全域範圍中的變數在什麼函數中都可以被直接引用，而不必通過全域對象。

滿足以下條件的變數屬於全域範圍：

• 在最外層定義的變數
• 全域對象的屬性
• 任何地方隱式定義的變數（未定義直接賦值的變數）

　　需要格外注意的是第三點，在任何地方隱式定義的變數都會定義在全域範圍中，即不通過var聲明直接賦值的變數。模組化編程的一個重要原則就是避免使用全域變數，所以我們在任何地方都不應該隱式定義變數

6句話理解JavaScript範圍