JavaScript運(yùn)行原理分析
JavaScript是一種基于對象的動態(tài)、弱類型腳本語言(以下簡稱JS),是一種解釋型語言,和其他的編程語言不同,如java/C++等編譯型語言,這些語言在代碼執(zhí)行前會進(jìn)行通篇編譯,先編譯成字節(jié)碼(機(jī)器碼)。然后在執(zhí)行。而JS不是這樣做的,JS是不需要編譯成中間碼,而是可以直接在瀏覽器中運(yùn)行,JS運(yùn)行過程可分為兩個階段,編譯和執(zhí)行。(可參考你不知道的JS這本書),當(dāng)JS控制器轉(zhuǎn)到一段可執(zhí)行的代碼時(這段可執(zhí)行代碼就是編譯階段生成的),會創(chuàng)建與之對應(yīng)的執(zhí)行上下文(Excution Context簡稱EC)。執(zhí)行上下文可以理解為執(zhí)行環(huán)境(執(zhí)行上下文只能由JS解釋器創(chuàng)建,也只能由JS解釋器使用,用戶是不可以操作該‘對象'的)。
JS中的執(zhí)行環(huán)境分為三類:
- 全局環(huán)境:當(dāng)JS引擎進(jìn)入一個代碼塊時,如遇到<script>xxx</script>標(biāo)簽,就是進(jìn)入一個全局執(zhí)行環(huán)境
- 函數(shù)環(huán)境:當(dāng)一個函數(shù)被調(diào)用時,在函數(shù)內(nèi)部就形成了一個函數(shù)執(zhí)行環(huán)境
- eval():把字符串單做JS代碼執(zhí)行,不推薦使用
在一段JS代碼中可能會產(chǎn)生多個執(zhí)行上下文,在JS中用棧這種數(shù)據(jù)結(jié)構(gòu)來管理執(zhí)行上下文,棧的特點(diǎn)是“先進(jìn)后出,后進(jìn)先出”,這種棧稱之為函數(shù)調(diào)用棧。
執(zhí)行上下文的特點(diǎn)
- 棧底永遠(yuǎn)是全局執(zhí)行上下文,有且僅有一個
- 全局執(zhí)行上下文只有在瀏覽器關(guān)閉時,才會彈出棧
- 其他的執(zhí)行上下文的數(shù)量沒有限制
- 棧頂永遠(yuǎn)是當(dāng)前活動執(zhí)行上下文,其余的都處于等待狀態(tài)中,一旦執(zhí)行完畢,立即彈出棧,然后控制權(quán)交回下一個執(zhí)行上下文
- 函數(shù)只有在每次被調(diào)用時,才會為其創(chuàng)建執(zhí)行上下文,函數(shù)被聲明時是沒有的。
執(zhí)行上下文可以形象的理解為一個普通的JS對象,一個執(zhí)行上下文的生命周期大概包含兩個階段:
創(chuàng)建階段
此階段主要完成三件事件,1、創(chuàng)建變量對象 2、建立作用域鏈 3、確定this指向
執(zhí)行階段
此階段主要完成變量賦值、函數(shù)調(diào)用、其他操作
變量對象(VO)的創(chuàng)建過程
- 1、根據(jù)函數(shù)參數(shù),創(chuàng)建并初始化arguments對象,給arguments對象添加屬性"0","1","2","3"等屬性,其初始值為undefined,并設(shè)置arguments.length值為實(shí)際傳入?yún)?shù)的個數(shù)。
- 2、查找function函數(shù)聲明,在變量對象上添加屬性,屬性名就是函數(shù)名,屬性值就是函數(shù)的引用值,如果已經(jīng)存在同名的,則直接覆蓋
- 3、查找var變量聲明(查找變量時,會把函數(shù)的參數(shù)等價于var聲明,所以在VO中也會添加和參數(shù)名一樣的屬性,初始值也是undefined),在變量對象添加屬性,屬性名就是變量名,屬性值是undefined,如果已經(jīng)存在同名的,則不處理
如果存在同名標(biāo)識符(函數(shù)、變量),則函數(shù)可以覆蓋變量,函數(shù)的優(yōu)先級高于變量
變量對象(OV)和激活對象(AO)是同一個東西,在不同時期的兩種叫法。在創(chuàng)建時期叫變量對象,在執(zhí)行時期叫激活對象
以如下代碼為例
var g_name="tom"; var g_age=20; function g_fn(num){ var l_name="kity"; var l_age=18; function l_fn(){ console.log(g_name + '===' + l_name + '===' + num); } } g_fn(10);
編譯階段
當(dāng)JS控制器轉(zhuǎn)到這一段代碼時,會創(chuàng)建一個執(zhí)行上下文,G_EC
執(zhí)行上下文的結(jié)構(gòu)大概如下:
G_EC = { VO : {}, Scope_chain : [], this : {} } /* VO的結(jié)構(gòu)大概 */ VO = { g_name : undefined, g_age : undefined, g_fn : <函數(shù)在內(nèi)存中引用值> } /* Scope_chain的大概結(jié)構(gòu)如下 */ Scope_chain = [ G_EC.VO ] // 數(shù)組中第一個元素是當(dāng)前執(zhí)行上下文的VO,第二個是父執(zhí)行上下文的VO,最后一個是全局執(zhí)行上下文的VO,在執(zhí)行階段,會沿著這個作用域鏈一個一個的查找標(biāo)識符,如果查到則返回,否知一直查找到全局執(zhí)行上下文的VO /* this */ this = undefined // 此時this的值是undefined
執(zhí)行上下文一旦創(chuàng)建完畢,就立馬被壓入函數(shù)調(diào)用棧中,此時解釋器會悄悄的做一件事情,就是給當(dāng)前VO中的函數(shù)添加一個內(nèi)部屬性[[scope]],該屬性指向上面的作用域鏈。
g_fn.scope = [ global_EC.VO ] // 該scope屬性只能被JS解釋器所使用,用戶無法使用
執(zhí)行階段
一行一行執(zhí)行代碼,當(dāng)遇到一個表達(dá)式時,就會去當(dāng)前作用域鏈的中查找VO對象,如果找到則返回,如果找不到,則繼續(xù)查找下一個VO對象,直至全局VO對象終止。
此階段可以有變量賦值,函數(shù)調(diào)用等操作,當(dāng)解釋器遇到g_fn()時,就知道這是一個函數(shù)調(diào)用,然后立即為其創(chuàng)建一個函數(shù)執(zhí)行上下文,fn_EC,該上下文fn_EC同樣有兩個階段
分別是創(chuàng)建階段和執(zhí)行階段。
在創(chuàng)建階段,對于函數(shù)執(zhí)行上下文,在創(chuàng)建變量對象時,會多創(chuàng)建一個arguments對象,然后為arguments對象添加屬性:"0","1", "2"其初始值為undefined,
- 查找function函數(shù)聲明
- 查找var變量聲明
相關(guān)文章
JavaScript中的Number數(shù)字類型學(xué)習(xí)筆記
對數(shù)字類型支持得不夠強(qiáng)大是很多人吐槽JavaScript的原因,anyway...這里整理了JavaScript中的Number數(shù)字類型學(xué)習(xí)筆記,適合入門及基礎(chǔ)知識復(fù)習(xí),需要的朋友可以參考下2016-05-05javascript Math.random()隨機(jī)數(shù)函數(shù)
返回指定范圍的隨機(jī)數(shù)(m-n之間)的公式 ,大家可以參考下。2009-11-11JavaScript Try...Catch 聲明的 使用方法
JavaScript Try...Catch 聲明的 使用方法...2007-04-04一篇文章帶你搞懂JavaScript的變量與數(shù)據(jù)類型
這篇文章主要為大家介紹了JavaScript的變量與數(shù)據(jù)類型,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-01-01Javascript基礎(chǔ)知識(三)BOM,DOM總結(jié)
本文是基礎(chǔ)知識系列的第三篇文章,主要介紹javascript中BOM,DOM的一些心得總結(jié),非常實(shí)用,有需要的朋友可以參考下2014-09-09