作用域是JavaScript最重要的概念之一，想要學(xué)好JavaScript就需要理解JavaScript作用域和作用域鏈的工作原理。今天這篇文章對(duì)JavaScript作用域示例詳解的介紹，希望能幫助大家更好的學(xué)習(xí)JavaScript。
任何程序設(shè)計(jì)語言都有作用域的概念，簡單的說，作用域就是變量與函數(shù)的可訪問范圍，即作用域控制著變量與函數(shù)的可見性和生命周期。在JavaScript中，變量的作用域有全局作用域和局部作用域兩種。
一、JavaScript中無塊級(jí)作用域
在Java或C#中存在塊級(jí)作用域，即：大括號(hào)也是一個(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語言中無塊級(jí)作用域
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)順序，對(duì)于上述實(shí)例：
當(dāng)執(zhí)行console.log(xo)時(shí)，其尋找順序?yàn)楦鶕?jù)作用域鏈從內(nèi)到外的優(yōu)先級(jí)尋找，如果內(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';<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
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。
以上所述是小編給大家介紹的JavaScript作用域示例詳解，希望對(duì)大家有所幫助