五句話搞定JavaScript做用域（ES5）

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

1、「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 關鍵字，用於指定變量屬於塊級做用域。

2、JavaScript採用函數做用域

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

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

 

3、JavaScript的做用域鏈

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

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

 

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

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

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

5、聲明提早

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

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

 

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

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

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

 

在函數內若是這麼寫：

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

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

 

 

原文鏈接： http://www.javashuo.com/article/p-cswajoss-bv.html