JavaScript運行原理

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

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

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

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

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

• 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 + '===' + l_name + '===' + 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變數宣告

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

相關文章：

使用React中的Native實作圖片檢視元件

#使用vue-cli結合Element-ui在cropper. js基礎上封裝vue來實作圖片裁切元件功能

在vue.js中實作圖片本機預覽裁切壓縮上傳等一系列功能

#

以上是JavaScript運行原理的詳細內容。更多資訊請關注PHP中文網其他相關文章！