五句話搞定JavaScript作用域

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

一、“JavaScript中無塊級作用域”

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

五句話搞定JavaScript作用域

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

Java

五句話搞定JavaScript作用域

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

補充：标題之是以添加雙引号是因為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

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

不同的時，在執行【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。

作者：武沛齊

出處：http://www.cnblogs.com/wupeiqi/

本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接。