javascript 程序的每一個(gè)字節(jié)都是在這個(gè)或那個(gè)運(yùn)行上下文（execution context）中執(zhí)行的。你可以把這些上下文想象為代碼的鄰居，它們可以給每一行代碼指明：從何處來，朋友和鄰居又是誰。沒錯(cuò)，這是很重要的信息，因?yàn)?javascript社會(huì)有相當(dāng)嚴(yán)格的規(guī)則，規(guī)定誰可以跟誰交往。運(yùn)行上下文則是有大門把守的社區(qū)而非其內(nèi)開放的小門。

我們通?？梢园堰@些社會(huì)邊界稱為作用域，并且有充足的重要性在每一位鄰居的憲章里立法，而這個(gè)憲章就是我們要說的上下文的作用域鏈（scope chain）。在特定的鄰里關(guān)系內(nèi)，代碼只能訪問它的作用域鏈內(nèi)的變量。與超出它鄰里的變量比起來，代碼更喜歡跟本地（local，即局部）的打交道。

任何程序設(shè)計(jì)語言都有作用域的概念，簡單的說，作用域就是變量與函數(shù)的可訪問范圍，即作用域控制著變量與函數(shù)的可見性和生命周期。JavaScript的作用域一直以來是前端開發(fā)中比較難以理解的知識點(diǎn)，對于JavaScript的作用域主要記住幾句話，輕松搞定JavaScript作用域

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

在Java或C#中存在塊級作用域，即：大括號也是一個(gè)作用域。

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

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

在JavaScript語言中無塊級作用域

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

二、JavaScript采用函數(shù)作用域

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

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

三、JavaScript的作用域鏈

由于JavaScript中的每個(gè)函數(shù)作為一個(gè)作用域，如果出現(xiàn)函數(shù)嵌套函數(shù)，則就會(huì)出現(xiàn)作用域鏈。

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)順序，對于上述實(shí)例：

當(dāng)執(zhí)行console.log(xo)時(shí)，其尋找順序?yàn)?code>根據(jù)作用域鏈從內(nèi)到外的優(yōu)先級尋找，如果內(nèi)層沒有就逐步向上找，直到?jīng)]找到拋出異常。

四、JavaScript的作用域鏈執(zhí)行前已創(chuàng)建

JavaScript的作用域在被執(zhí)行之前已經(jīng)創(chuàng)建，日后再去執(zhí)行時(shí)只需要按照作用域鏈去尋找即可。

示例一：

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ù)作用域
不同的時(shí)，在執(zhí)行【var ret = Func();】時(shí)，F(xiàn)unc作用域中的xo變量的值已經(jīng)由 “eric” 被重置為 “seven”，所以之后再執(zhí)行【ret();】時(shí)，就只能找到“seven”。

示例三：

xo = 'alex';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

JavaScript中如果創(chuàng)建值而不賦值，則該值為 undefined，如：

var xxoo;console.log(xxoo);// 輸出：undefined在函數(shù)內(nèi)如果這么寫：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。

Js是一門很有趣的語言，由于它的很多特性是針對HTML中DOM的操作，因而顯得隨意而略失嚴(yán)謹(jǐn)，但隨著前端的不斷繁榮發(fā)展和Node的興起，Js已經(jīng)不再是"toy language"或是jQuery時(shí)代的"CSS擴(kuò)展"，本文提到的這些無論是對新手還是從傳統(tǒng)Web開發(fā)中過度過來的Js開發(fā)人員來說，都很容易被混淆或誤解，希望本文可以有所幫助。