輕鬆5句話解決JavaScript的範圍_javascript技巧

javascript 程式的每一個位元組都是在這個或那個運行上下文（execution context）中執行的。你可以把這些上下文想象為代碼的鄰居，它們可以給每一行代碼指明：從何處來，朋友和鄰居又是誰。沒錯，這是很重要的資訊，因為 javascript社會有相當嚴格的規則，規定誰可以跟誰交往。運行上下文則是有大門把守的社區而非其內開放的小門。

我們通常可以把這些社會邊界稱為範圍，並且有充足的重要性在每一位鄰居的憲章裡立法，而這個憲章就是我們要說的內容相關的範圍鏈（scope chain）。在特定的鄰裡關係內，代碼只能訪問它的範圍鏈內的變數。與超出它鄰裡的變數比起來，代碼更喜歡跟本地（local，即局部）的打交道。

任何程式設計語言都有範圍的概念，簡單的說，範圍就是變數與函數的可存取範圍，即範圍控制著變數與函數的可見度和生命週期。JavaScript的範圍一直以來是前端開發中比較難以理解的知識點，對於JavaScript的範圍主要記住幾句話，輕鬆搞定JavaScript範圍

一、“JavaScript中無塊級範圍”

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

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

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

在JavaScript語言中無塊級範圍

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

二、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';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。

Js是一門很有趣的語言，由於它的很多特性是針對HTML中DOM的操作，因而顯得隨意而略失嚴謹，但隨著前端的不斷繁榮發展和Node的興起，Js已經不再是"toy language"或是jQuery時代的"CSS擴充"，本文提到的這些無論是對新手還是從傳統Web開發中過度過來的Js開發人員來說，都很容易被混淆或誤解，希望本文可以有所協助。