JavaScript運行原理的示例分析

這篇文章主要介紹JavaScript運行原理的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站制作、網(wǎng)站設(shè)計、石景山網(wǎng)絡(luò)推廣、微信小程序、石景山網(wǎng)絡(luò)營銷、石景山企業(yè)策劃、石景山品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；成都創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供石景山建站搭建服務(wù)，24小時服務(wù)熱線：18980820575，官方網(wǎng)址：muchs.cn

JavaScript是一種基于對象的動態(tài)、弱類型腳本語言（以下簡稱JS），是一種解釋型語言，和其他的編程語言不同，如java/C++等編譯型語言，這些語言在代碼執(zhí)行前會進行通篇編譯，先編譯成字節(jié)碼（機器碼）。然后在執(zhí)行。而JS不是這樣做的，JS是不需要編譯成中間碼，而是可以直接在瀏覽器中運行，JS運行過程可分為兩個階段，編譯和執(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引擎進入一個代碼塊時，如遇到<script>xxx</script>標(biāo)簽，就是進入一個全局執(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í)行上下文，棧的特點是“先進后出，后進先出”,這種棧稱之為函數(shù)調(diào)用棧。

執(zhí)行上下文的特點

  • 棧底永遠是全局執(zhí)行上下文，有且僅有一個

  • 全局執(zhí)行上下文只有在瀏覽器關(guān)閉時，才會彈出棧

  • 其他的執(zhí)行上下文的數(shù)量沒有限制

  • 棧頂永遠是當(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值為實際傳入?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ā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變量聲明

以上是“JavaScript運行原理的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前題目：JavaScript運行原理的示例分析
文章路徑：http://muchs.cn/article34/jpjcpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、微信公眾號、品牌網(wǎng)站制作、網(wǎng)站維護、品牌網(wǎng)站設(shè)計、網(wǎng)站營銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都做網(wǎng)站