JavaScript 做用域知識點梳理

JavaScript的做用域一直以來是前端開發中難以理解的知識點，對於JavaScript的做用域主要記住幾句話。

1、「JavaScript」 中無塊級做用域

在   Java 或 C# 中存在塊級做用域，即：大括號也是一個做用域。

1 public static void main ()
2 {
3     if(1==1){
4         String name = "seven";
5     }
6     System.out.println(name);
7 }
8 // 報

View Code

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

C#

在JavaScript 語言中無塊級做用域

1 function Main(){
2     if(1==1){
3         var name = 'seven';
4     }
5     console.log(name);
6 }
7 // 輸出： seven

補充： 標題之因此添加雙影號是由於javascript6中新引入了let關鍵字，用於指定變量屬於塊級做用域。

2、JavaScript 採用函數做用域

在 JavaScript 中每一個函數做爲一個做用域，在外部沒法訪問內部做用域中的 變量。

1 function Main(){
2     var innerValue = 'seven';
3 }
4  
5 Main();
6  
7 console.log(innerValue);
8  
9 // 報錯：Uncaught ReferenceError: innerValue is not defined

3、JavaScript 的做用域鏈

因爲 JavaScript 中的每一個函數 做爲一個做用域，若是出現函數嵌套函數，則就會出現做用域鏈。

 1 xo = 'alex';
 2   
 3 function Func(){
 4     var xo = "seven";
 5     function inner(){
 6         var xo = 'alvin';
 7         console.log(xo);
 8     }
 9     inner();
10 }
11 Func();

如上述代碼則出現三個做用域組成的做用域鏈，若是出現做用域鏈後，那麼尋找變量的時候就會出現順序，對於上述實例：

當執行 console.log( xo) 時，其尋找順序 爲根據做用域鏈從內到外的優先級尋找，若是內層沒有就逐步向上找，直到沒有拋出異常。

4、JavaScript 的做用域鏈執行前已建立，往後再去執行時只須要按照做用域鏈去尋找便可。

示例一

 1 xo = 'alex';
 2  
 3 function Func(){
 4     var xo = "seven";
 5     function inner(){
 6  
 7         console.log(xo);
 8     }
 9     return inner;
10 }
11  
12 var ret = Func();
13 ret();
14 // 輸出結果： seven

上述代碼，在函數被調用以前做用域已經存在：

   全局做用域 ->  Func函數做用域  ->  inner函數做用域

當執行【ret（）；】 時，因爲其指代的是 inner函數，此函數做用域鏈在執行以前已經被定義爲  全局做用域 ->  Func函數做用域  ->  inner函數做用域。 因此，在執行【ret（）；】時，會根據已經存在的做用域的做用域鏈去尋找變量。

示例二

 1 xo = 'alex';
 2  
 3 function Func(){
 4     var xo = "eirc";
 5     function inner(){
 6  
 7         console.log(xo);
 8     }
 9     xo = 'seven';
10     return inner;
11 }
12  
13 var ret = Func();
14 ret();
15 // 輸出結果： seven

上述代碼和示例一的目的相同，也是強調在函數被調用以前做用域鏈已經存在：

• 全局做用域 -> Func函數做用域 -> inner函數做用域

不一樣的時，在執行【var ret = Func();】時，Func做用域中的xo變量的值已經由 「eric」 被重置爲 「seven」，因此以後再執行【ret();】時，就只能找到「seven」。

示例三：

 1 xo = 'alex';<br>
 2 function Bar(){
 3     console.log(xo);
 4 }
 5  
 6 function Func(){
 7     var xo = "seven";
 8      
 9     return Bar;
10 }
11  
12 var ret = Func();
13 ret();
14 // 輸出結果： alex

上述代碼，在函數被執行以前已經建立了兩條做用域鏈：

• 全局做用域 -> Bar函數做用域
• 全局做用域 -> Func函數做用域

當執行【ret();】時，ret代指的Bar函數，而Bar函數的做用域鏈已經存在：全局做用域 -> Bar函數做用域，因此，執行時會根據已經存在的做用域鏈去尋找。

5、聲明提早

在JavaScript中若是不建立變量，直接去使用，則報錯：

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

JavaScript中若是建立值而不賦值，則該值爲 undefined，如：

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

在函數內若是這麼寫：

1 function Foo(){
2     console.log(xo);
3     var xo = 'seven';
4 }
5  
6 Foo();
7 // 輸出：undefined

上述代碼，不報錯而是輸出 undefined，其緣由是：JavaScript的函數在被執行以前，會將其中的變量所有聲明，而不賦值。因此，至關於上述實例中，函數在「預編譯」時，已經執行了var xo；因此上述代碼中輸出的是undefined。