JavaScript--00做用域

JavaScript的做用域一直以來是前端開發中比較難以理解的知識點，對於JavaScript的做用域主要記住幾句話，走遍天下都不怕...

1、「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語言中無塊級做用域

1 2 3 4 5 6 7

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

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

2、JavaScript採用函數做用域

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

1 2 3 4 5 6 7 8 9

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

3、JavaScript的做用域鏈

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

1 2 3 4 5 6 7 8 9 10 11

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

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

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

4、JavaScript的做用域鏈執行前已建立

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

示例一：

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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();】時，會根據已經存在的做用域鏈去尋找變量。

示例二：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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」。

示例三：

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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函數做用域，因此，執行時會根據已經存在的做用域鏈去尋找。

5、聲明提早

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

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

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

1 2 3

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

在函數內若是這麼寫：

1 2 3 4 5 6 7

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

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