JavaScript的作用域一直以來是前端開發(fā)中比較難以理解的知識(shí)點(diǎn)，對(duì)于JavaScript的作用域主要記住幾句話，走遍天下都不怕...

一、“JavaScript中無塊級(jí)作用域”
在Java或C#中存在塊級(jí)作用域，即：大括號(hào)也是一個(gè)作用域。

//java
public static void main (){ 
      if(1==1){ 
          String name = "seven";
      } 
     System.out.println(name);
}
// 報(bào)錯(cuò)

//c#
public static void Main(){ 
       if(1==1){
           string name = "seven"; 
       } 
      Console.WriteLine(name);
}
// 報(bào)錯(cuò)

在JavaScript語言中無塊級(jí)作用域
function Main(){
     if(1==1){
        var name = 'seven';
    }
    console.log(name);
}
Main();
//輸出seven

補(bǔ)充：標(biāo)題之所以添加雙引號(hào)是因?yàn)镴avaScript6中新引入了 let 關(guān)鍵字，用于指定變量屬于塊級(jí)作用域。

二、JavaScript采用函數(shù)作用域
在JavaScript中每個(gè)函數(shù)作為一個(gè)作用域，在外部無法訪問內(nèi)部作用域中的變量。

function Main(){    
     var innerValue = 'seven';
}
console.log(innerValue);
Main();

三、JavaScript的作用域鏈

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

如上述代碼則出現(xiàn)三個(gè)作用域組成的作用域鏈，如果出現(xiàn)作用域鏈后，那么尋找變量時(shí)候就會(huì)出現(xiàn)順序，對(duì)于上述實(shí)例：
當(dāng)執(zhí)行console.log(xo)時(shí)，其尋找順序?yàn)?strong>根據(jù)作用域鏈從內(nèi)到外的優(yōu)先級(jí)尋找，如果內(nèi)層沒有就逐步向上找，直到?jīng)]找到拋出異常。

xo = 'alex';
function Func(){
    var xo = "seven";
    function inner(){
        console.log(xo);
    }
    return inner;
}
var ret = Func();
ret();
// 輸出結(jié)果： seven

上述代碼，在函數(shù)被調(diào)用之前作用域鏈已經(jīng)存在：
全局作用域 -> Func函數(shù)作用域 -> inner函數(shù)作用域
當(dāng)執(zhí)行【ret();】時(shí)，由于其代指的是inner函數(shù)，此函數(shù)的作用域鏈在執(zhí)行之前已經(jīng)被定義為：全局作用域 -> Func函數(shù)作用域 -> inner函數(shù)作用域，所以，在執(zhí)行【ret();】時(shí)，會(huì)根據(jù)已經(jīng)存在的作用域鏈去尋找變量。
示例二：

xo = 'alex';
function Func(){
    var xo = "eirc";
    function inner(){
        console.log(xo);
    }
    xo = 'seven';
    return inner;
}
var ret = Func();
ret();
// 輸出結(jié)果： seven

上述代碼和示例一的目的相同，也是強(qiáng)調(diào)在函數(shù)被調(diào)用之前作用域鏈已經(jīng)存在：
全局作用域 -> Func函數(shù)作用域 -> inner函數(shù)作用域
不同的是，在執(zhí)行【var ret = Func();】時(shí)，F(xiàn)unc作用域中的xo變量的值已經(jīng)由 “eric” 被重置為 “seven”，所以之后再執(zhí)行【ret();】時(shí)，就只能找到“seven”。
示例三：

xo = 'alex';<br>
function Bar(){
    console.log(xo);
}
function Func(){
    var xo = "seven";
    return Bar;
}
var ret = Func();
ret();
// 輸出結(jié)果： alex

上述代碼，在函數(shù)被執(zhí)行之前已經(jīng)創(chuàng)建了兩條作用域鏈：
全局作用域 -> Bar函數(shù)作用域
全局作用域 -> Func函數(shù)作用域
當(dāng)執(zhí)行【ret();】時(shí)，ret代指的Bar函數(shù)，而Bar函數(shù)的作用域鏈已經(jīng)存在：全局作用域 -> Bar函數(shù)作用域，所以，執(zhí)行時(shí)會(huì)根據(jù)已經(jīng)存在的作用域鏈去尋找。

五、聲明提前
在JavaScript中如果不創(chuàng)建變量，直接去使用，則報(bào)錯(cuò)：

console.log(xxoo);
// 報(bào)錯(cuò)：Uncaught ReferenceError: xxoo is not defined

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

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

上述代碼，不報(bào)錯(cuò)而是輸出 undefined，其原因是：JavaScript的函數(shù)在被執(zhí)行之前，會(huì)將其中的變量全部聲明，而不賦值。所以，相當(dāng)于上述實(shí)例中，函數(shù)在“預(yù)編譯”時(shí)，已經(jīng)執(zhí)行了var xo；所以上述代碼中輸出的是undefined。

參考鏈接: http://www.cnblogs.com/wupeiqi/p/5649402.html