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

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

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

public?static?void?main?() {????if(1==1){String?name?=?"seven";}System.out.println(name); }//?報(bào)錯public?static?void?Main() {????if(1==1){string?name?=?"seven";}Console.WriteLine(name); }//?報(bào)錯

在JavaScript語言中無塊級作用域

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

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

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

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

三、JavaScript的作用域鏈

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

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

如上述代碼則出現(xiàn)三個作用域組成的作用域鏈，如果出現(xiàn)作用域鏈后，那么尋找變量時(shí)候就會出現(xiàn)順序，對于上述實(shí)例：

當(dāng)執(zhí)行console.log(xo)時(shí)，其尋找順序?yàn)?strong>根據(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í)，會根據(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í)，Func作用域中的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í)會根據(jù)已經(jīng)存在的作用域鏈去尋找。

五、聲明提前

在JavaScript中如果不創(chuàng)建變量，直接去使用，則報(bào)錯：

console.log(xxoo); //?報(bào)錯：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)錯而是輸出 undefined，其原因是：JavaScript的函數(shù)在被執(zhí)行之前，會將其中的變量全部聲明，而不賦值。所以，相當(dāng)于上述實(shí)例中，函數(shù)在“預(yù)編譯”時(shí)，已經(jīng)執(zhí)行了var xo；所以上述代碼中輸出的是undefined。

轉(zhuǎn)載于:https://blog.51cto.com/3060674/1812390

總結(jié)

以上是生活随笔為你收集整理的来来来，一起五句话搞定JavaScript作用域的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。