JavaScript的作用域一直以來是前端開發(fā)中比較難以理解的知識點，對于JavaScript的作用域主要記住幾句話，走遍天下都不怕...
一、“JavaScript中無塊級作用域”
在Java或C#中存在塊級作用域，即：大括號也是一個作用域。
publicstaticvoidmain (){
if(1==1){Stringname ="seven";
?}?
System.out.println(name);}
// 報錯
publicstaticvoidMain(){
if(1==1){stringname ="seven";?
}?
Console.WriteLine(name);}
// 報錯
在JavaScript語言中無塊級作用域
functionMain(){
if(1==1){varname ='seven';
}
console.log(name);}
// 輸出： seven
二、JavaScript采用函數(shù)作用域
在JavaScript中每個函數(shù)作為一個作用域，在外部無法訪問內(nèi)部作用域中的變量。
functionMain(){
varinnerValue ='seven';
}
Main();
console.log(innerValue);
// 報錯：Uncaught ReferenceError: innerValue is not defined
三、JavaScript的作用域鏈
由于JavaScript中的每個函數(shù)作為一個作用域，如果出現(xiàn)函數(shù)嵌套函數(shù)，則就會出現(xiàn)作用域鏈。
xo ='alex';
functionFunc(){
varxo ="seven";
functioninner(){
varxo ='alvin';
console.log(xo); }
?inner();
}Func();
如上述代碼則出現(xiàn)三個作用域組成的作用域鏈，如果出現(xiàn)作用域鏈后，那么尋找變量時候就會出現(xiàn)順序，對于上述實例：
當執(zhí)行console.log(xo)時，其尋找順序為根據(jù)作用域鏈從內(nèi)到外的優(yōu)先級尋找，如果內(nèi)層沒有就逐步向上找，直到?jīng)]找到拋出異常。
四、JavaScript的作用域鏈執(zhí)行前已創(chuàng)建
JavaScript的作用域在被執(zhí)行之前已經(jīng)創(chuàng)建，日后再去執(zhí)行時只需要按照作用域鏈去尋找即可。
示例一：
xo ='alex';
functionFunc(){
varxo ="seven";
functioninner(){
console.log(xo); }
returninner;}
varret = Func();
ret();
// 輸出結(jié)果： seven
上述代碼，在函數(shù)被調(diào)用之前作用域鏈已經(jīng)存在：
全局作用域 -> Func函數(shù)作用域 -> inner函數(shù)作用域
當執(zhí)行【ret();】時，由于其代指的是inner函數(shù)，此函數(shù)的作用域鏈在執(zhí)行之前已經(jīng)被定義為：全局作用域 -> Func函數(shù)作用域 -> inner函數(shù)作用域，所以，在執(zhí)行【ret();】時，會根據(jù)已經(jīng)存在的作用域鏈去尋找變量。
示例二：
xo ='alex';
functionFunc(){
varxo ="eirc";
functioninner(){
console.log(xo);?
} xo ='seven';returninner;
}varret = Func();
ret();
// 輸出結(jié)果： seven
上述代碼和示例一的目的相同，也是強調(diào)在函數(shù)被調(diào)用之前作用域鏈已經(jīng)存在：
全局作用域 -> Func函數(shù)作用域 -> inner函數(shù)作用域
不同的時，在執(zhí)行【var ret = Func();】時，F(xiàn)unc作用域中的xo變量的值已經(jīng)由 “eric” 被重置為 “seven”，所以之后再執(zhí)行【ret();】時，就只能找到“seven”。
示例三：
xo ='alex';
functionBar(){
console.log(xo);
}functionFunc(){
varxo ="seven";
returnBar;}
varret = Func();
ret();
// 輸出結(jié)果： alex
上述代碼，在函數(shù)被執(zhí)行之前已經(jīng)創(chuàng)建了兩條作用域鏈：
全局作用域 -> Bar函數(shù)作用域
全局作用域 -> Func函數(shù)作用域
當執(zhí)行【ret();】時，ret代指的Bar函數(shù)，而Bar函數(shù)的作用域鏈已經(jīng)存在：全局作用域 -> Bar函數(shù)作用域，所以，執(zhí)行時會根據(jù)已經(jīng)存在的作用域鏈去尋找。
五、聲明提前
在JavaScript中如果不創(chuàng)建變量，直接去使用，則報錯：
console.log(xxoo);
//報錯：Uncaught ReferenceError: xxooisnotdefined
JavaScript中如果創(chuàng)建值而不賦值，則該值為 undefined，如：
varxxoo;console.log(xxoo);
// 輸出：undefined
在函數(shù)內(nèi)如果這么寫：
functionFoo(){
console.log(xo);
varxo ='seven';}
Foo();
// 輸出：undefined
上述代碼，不報錯而是輸出 undefined，其原因是：JavaScript的函數(shù)在被執(zhí)行之前，會將其中的變量全部聲明，而不賦值。所以，相當于上述實例中，函數(shù)在“預(yù)編譯”時，已經(jīng)執(zhí)行了var xo；所以上述代碼中輸出的是undefined。
Java高架構(gòu)師、分布式架構(gòu)、高可擴展、高性能、高并發(fā)、性能優(yōu)化、Spring boot、Redis、ActiveMQ、Nginx、Mycat、Netty、Jvm大型分布式項目實戰(zhàn)學習架構(gòu)師視頻免費獲取架構(gòu)群：854180697????????加群鏈接
寫在最后：歡迎留言討論，加關(guān)注，持續(xù)更新！
