JavaScript作用域示例詳解
作用域是JavaScript最重要的概念之一,想要學(xué)好JavaScript就需要理解JavaScript作用域和作用域鏈的工作原理。今天這篇文章對JavaScript作用域示例詳解的介紹,希望能幫助大家更好的學(xué)習(xí)JavaScript。
任何程序設(shè)計語言都有作用域的概念,簡單的說,作用域就是變量與函數(shù)的可訪問范圍,即作用域控制著變量與函數(shù)的可見性和生命周期。在JavaScript中,變量的作用域有全局作用域和局部作用域兩種。
一、JavaScript中無塊級作用域
在Java或C#中存在塊級作用域,即:大括號也是一個作用域。
public static void main () { if(1==1){ String name = "seven"; } System.out.println(name); } // 報錯 public static void Main() { if(1==1){ string name = "seven"; } Console.WriteLine(name); } // 報錯
在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); // 報錯: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)作用域鏈后,那么尋找變量時候就會出現(xiàn)順序,對于上述實(shí)例:
當(dāng)執(zhí)行console.log(xo)時,其尋找順序?yàn)楦鶕?jù)作用域鏈從內(nèi)到外的優(yōu)先級尋找,如果內(nèi)層沒有就逐步向上找,直到?jīng)]找到拋出異常。
四、JavaScript的作用域鏈執(zhí)行前已創(chuàng)建
JavaScript的作用域在被執(zhí)行之前已經(jīng)創(chuàng)建,日后再去執(zhí)行時只需要按照作用域鏈去尋找即可。
示例一:
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();】時,由于其代指的是inner函數(shù),此函數(shù)的作用域鏈在執(zhí)行之前已經(jīng)被定義為:全局作用域 -> Func函數(shù)作用域 -> inner函數(shù)作用域,所以,在執(zhí)行【ret();】時,會根據(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();】時,F(xiàn)unc作用域中的xo變量的值已經(jīng)由 “eric” 被重置為 “seven”,所以之后再執(zhí)行【ret();】時,就只能找到“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();】時,ret代指的Bar函數(shù),而Bar函數(shù)的作用域鏈已經(jīng)存在:全局作用域 -> Bar函數(shù)作用域,所以,執(zhí)行時會根據(jù)已經(jīng)存在的作用域鏈去尋找。
五、聲明提前
在JavaScript中如果不創(chuàng)建變量,直接去使用,則報錯:
console.log(xxoo); // 報錯: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
上述代碼,不報錯而是輸出 undefined,其原因是:JavaScript的函數(shù)在被執(zhí)行之前,會將其中的變量全部聲明,而不賦值。所以,相當(dāng)于上述實(shí)例中,函數(shù)在“預(yù)編譯”時,已經(jīng)執(zhí)行了var xo;所以上述代碼中輸出的是undefined。
以上所述是小編給大家介紹的JavaScript作用域示例詳解,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
淺談js中StringBuffer類的實(shí)現(xiàn)方法及使用
下面小編就為大家?guī)硪黄獪\談js中StringBuffer類的實(shí)現(xiàn)方法及使用。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-09-09js函數(shù)參數(shù)設(shè)置默認(rèn)值的一種變通實(shí)現(xiàn)方法
js函數(shù)中有個儲存參數(shù)的數(shù)組arguments,因此js版支持參數(shù)默認(rèn)值的函數(shù)可以通過另外一種變通的方法實(shí)現(xiàn)2014-05-05javascript實(shí)現(xiàn)導(dǎo)航欄分頁效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)導(dǎo)航欄分頁效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-06-06js下通過prototype擴(kuò)展實(shí)現(xiàn)indexOf的代碼
這里使用js prototype擴(kuò)展實(shí)現(xiàn)的indexOf的實(shí)現(xiàn)代碼,跟js自帶的方法,差不多。2010-12-12