首頁 > web前端 > js教程 > 主體

JavaScript運作原理詳細分析解答

亚连
發布: 2018-05-18 16:59:54
原創
1469 人瀏覽過

這篇文章給大家從理論詳細分析了JavaScript運作原理以及知識點分享,對此有興趣的學習下吧。

JavaScript是一種基於物件的動態、弱型別腳本語言(以下簡稱JS),是一種詮釋型語言,和其他的程式語言不同,如java/C 等編譯型語言,這些語言在程式碼執行前會進行通篇編譯,先編譯成字節碼(機器碼)。然後在執行。而JS不是這樣做的,JS是不需要編譯成中間碼,而是可以直接在瀏覽器中執行,JS運行過程可分為兩個階段,編譯和執行。 (可參考你不知道的JS這本書),當JS控制器轉到一段可執行的程式碼時(這段可執行程式碼就是編譯階段產生的),會創建與之對應的執行上下文(Excution Context簡稱EC)。執行上下文可以理解為執行環境(執行上下文只能由JS解釋器創建,也只能由JS解釋器使用,使用者是不可以操作該『物件』的)。

JS中的執行環境分為三類:

  • #全域環境:當JS引擎進入一個程式碼區塊時,如遇到<script>xxx</script>標籤,就是進入一個全域執行環境

  • 函數環境:當函數被呼叫時,在函數內部就形成了一個函數執行環境

  • eval():把字串單做JS程式碼執行,不建議使用

在一段JS程式碼中可能會產生多個執行上下文,在JS中用棧這種資料結構來管理執行上下文,棧的特徵是「先進後出,後進先出」,這種棧稱之為函數呼叫棧。

執行上下文的特點

  • 堆疊底永遠是全域執行上下文,有且僅有一個

  • 全域執行上下文只有在瀏覽器關閉時,才會彈出堆疊

  • 其他的執行上下文的數量沒有限制

  • 堆疊頂永遠是當前活動執行上下文,其餘的都處於等待狀態中,一旦執行完畢,立即彈出棧,然後控制權交回下一個執行上下文

  • 函數只有在每次被呼叫時,才會為其建立執行上下文,函數被宣告時是沒有的。

執行上下文可以形象的理解為一個普通的JS對象,一個執行上下文的生命週期大概包含兩個階段:

建立階段

#此階段主要完成三件事件,1、建立變數物件2、建立作用域鏈3、確定this指向

#執行階段

##此階段主要完成變數賦值、函數呼叫、其他操作

變數物件(VO)的建立過程

  • 1、根據函數參數,建立並初始化arguments對象,給予arguments物件加入屬性"0","1","2","3"等屬性,其初始值為undefined,並設定arguments.length值為實際傳入參數的個數。

  • 2、尋找function函數聲明,在變數物件上新增屬性,屬性名就是函數名,屬性值就是函數的參考值,如果已經存在同名的,則直接覆寫

  • 3、尋找var變數宣告(尋找變數時,會把函數的參數等價於var聲明,所以在VO中也會加入和參數名稱一樣的屬性,初始值也是undefined),在變數物件中加入屬性,屬性名就是變數名,屬性值是undefined,如果已經存在同名的,則不處理

如果存在同名識別碼(函數、變數),則函數可以覆蓋變量,函數的優先權高於變數

變數物件(OV)和激活物件(AO)是同一個東西,在不同時期的兩個叫法。在創建時期叫變數對象,在執行時期叫激活對象

以如下程式碼為例

#

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 + &#39;===&#39; + l_name + &#39;===&#39; + num);
 }
}
g_fn(10);
登入後複製

編譯階段

當JS控制器轉到這一段程式碼時,會建立一個執行上下文,G_EC


執行上下文的結構大概如下:

G_EC = {
 VO   : {},
 Scope_chain : [],
 this  : {}
}

/* VO的结构大概 */
VO = {
 g_name : undefined,
 g_age : undefined,
 g_fn : <函数在内存中引用值>
}

/* Scope_chain的大概结构如下 */
Scope_chain = [ G_EC.VO ] // 数组中第一个元素是当前执行上下文的VO,第二个是父执行上下文的VO,最后一个是全局执行上下文的VO,在执行阶段,会沿着这个作用域链一个一个的查找标识符,如果查到则返回,否知一直查找到全局执行上下文的VO

/* this */
this = undefined // 此时this的值是undefined
登入後複製

執行上下文一旦創建完畢,就立刻被壓入函數調用棧中,此時解釋器會悄悄的做一件事情,就是給當前VO中的函數添加一個內部屬性[[scope]],該屬性指向上面的作用域鏈。

g_fn.scope = [ global_EC.VO ] // 该scope属性只能被JS解释器所使用,用户无法使用
登入後複製

執行階段

一行一行執行程式碼,當遇到一個表達式時,就會去目前作用域鏈的中查找VO對象,如果找到則傳回,如果找不到,則繼續尋找下一個VO對象,直到全域VO對象終止。


此階段可以有變數賦值,函數調用等操作,當解釋器遇到g_fn()時,就知道這是一個函數調用,然後立即為其創建一個函數執行上下文,fn_EC ,該上下文fn_EC同樣有兩個階段


分別是建立階段和執行階段。


在建立階段,對於函數執行上下文,在建立變數物件時,會多建立一個arguments對象,然後為arguments物件新增屬性:"0","1", "2"其初始值為undefined,

  • 找function函數宣告

  • 找出var變數宣告

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

p5.js實作黃金螺旋動畫

JS中事件委託使用詳解

Vue.js裡computed與methods使用詳解

以上是JavaScript運作原理詳細分析解答的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!