DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> Javascript 引擎工作機制詳解
Javascript 引擎工作機制詳解
編輯:關於JavaScript     

Javascript 引擎工作機制

javascript從定義到執行,JS引擎在實現層做了很多初始化工作,因此在學習JS引擎工作機制之前,我們需要引入幾個相關的概念:執行環境棧、全局對象、執行環境、變量對象、活動對象、作用域和作用域鏈等,這些概念正是JS引擎工作的核心組件。這篇文章的目的不是孤立的為你講解每一個概念,而是通過一個簡單的demo來展開分析,全局講解JS引擎從定義到執行的每一個細節,以及這些概念在其中所扮演的角色。


var x = 1; //定義一個全局變量 x
function A(y){
  var x = 2; //定義一個局部變量 x
  function B(z){ //定義一個內部函數 B
    console.log(x+y+z);
  }
  return B; //返回函數B的引用
}
var C = A(1); //執行A,返回B
C(1); //執行函數B

這個demo是一個閉包,執行結果是4,下面我們將分全局初始化、執行函數A、執行函數B 三個階段來分析JS引擎的工作機制:

一、全局初始化

JS引擎在進入一段可執行的代碼時,需要完成以下三個初始化工作:

首先,創建一個全局對象(Global Object) , 這個對象全局只存在一份,它的屬性在任何地方都可以訪問,它的存在伴隨著應用程序的整個生命周期。全局對象在創建時,將Math,String,Date,document 等常用的JS對象作為其屬性。由於這個全局對象不能通過名字直接訪問,因此還有另外一個屬性window,並將window指向了自身,這樣就可以通過window訪問這個全局對象了。用偽代碼模擬全局對象的大體結構如下:

//創建一個全局對象
var globalObject = { 
  Math:{},
  String:{},
  Date:{},
  document:{}, //DOM操作
  ...
  window:this //讓window屬性指向了自身
}

然後,JS引擎需要構建一個執行環境棧( Execution Context Stack) ,與此同時,也要創建一個全局執行環境(Execution Context)EC ,並將這個全局執行環境EC壓入執行環境棧中。執行環境棧的作用是為了保證程序能夠按照正確的順序被執行。在javascript中,每個函數都有自己的執行環境,當執行一個函數時,該函數的執行環境就會被推入執行環境棧的頂部並獲取執行權。當這個函數執行完畢,它的執行環境又從這個棧的頂部被刪除,並把執行權並還給之前執行環境。我們用偽代碼來模擬執行環境棧和EC的關系:

var ECStack = []; //定義一個執行環境棧,類似於數組

var EC = {};  //創建一個執行空間,
//ECMA-262規范並沒有對EC的數據結構做明確的定義,你可以理解為在內存中分配的一塊空間

ECStack.push(EC); //進入函數,壓入執行環境
ECStack.pop(EC); //函數返回後,刪除執行環境

最後,JS引擎還要創建一個與EC關聯的全局變量對象(Varibale Object) VO,  並把VO指向全局對象,VO中不僅包含了全局對象的原有屬性,還包括在全局定義的變量x 和函數 A,與此同時,在定義函數A的時候,還為 A 添加了一個內部屬性scope,並將scope指向了VO。每個函數在定義的時候,都會創建一個與之關聯的scope屬性,scope總是指向定義函數時所在的環境。此時的ECStack結構如下:

ECStack = [  //執行環境棧
  EC(G) = {  //全局執行環境
    VO(G):{ //定義全局變量對象
      ... //包含全局對象原有的屬性
      x = 1; //定義變量x
      A = function(){...}; //定義函數A
      A[[scope]] = this; //定義A的scope,並賦值為VO本身
    }
  }
];

二、 執行函數A

當執行進入A(1) 時,JS引擎需要完成以下工作:

首先,JS引擎會創建函數A的執行環境EC,然後EC推入執行環境棧的頂部並獲取執行權。此時執行環境棧中有兩個執行環境,分別是全局執行環境和函數A執行環境,A的執行環境在棧頂,全局執行環境在棧的底部。然後,創建函數A的作用域鏈(Scope Chain) ,在javascript中,每個執行環境都有自己的作用域鏈,用於標識符解析,當執行環境被創建時,它的作用域鏈就初始化為當前運行函數的scope所包含的對象。 

接著,JS引擎會創建一個當前函數的活動對象(Activation Object) AO,這裡的活動對象扮演著變量對象的角色,只是在函數中的叫法不同而已(你可以認為變量對象是一個總的概念,而活動對象是它的一個分支), AO中包含了函數的形參、arguments對象、this對象、以及局部變量和內部函數的定義,然後AO會被推入作用域鏈的頂端。需要注意的是,在定義函數B的時候,JS引擎同樣也會為B添加了一個scope屬性,並將scope指向了定義函數B時所在的環境,定義函數B的環境就是A的活動對象AO, 而AO位於鏈表的前端,由於鏈表具有首尾相連的特點,因此函數B的scope指向了A的整個作用域鏈。 我們再看看此時的ECStack結構:



ECStack = [  //執行環境棧
  EC(A) = {  //A的執行環境
    [scope]:VO(G), //VO是全局變量對象
    AO(A) : { //創建函數A的活動對象
      y:1,
      x:2, //定義局部變量x
      B:function(){...}, //定義函數B
      B[[scope]] = this; //this指代AO本身,而AO位於scopeChain的頂端,因此B[[scope]]指向整個作用域鏈
      arguments:[],//平時我們在函數中訪問的arguments就是AO中的arguments
      this:window //函數中的this指向調用者window對象
    },
    scopeChain:<AO(A),A[[scope]]> //鏈表初始化為A[[scope]],然後再把AO加入該作用域鏈的頂端,此時A的作用域鏈:AO(A)->VO(G)
  },
  EC(G) = {  //全局執行環境
    VO(G):{ //創建全局變量對象
      ... //包含全局對象原有的屬性
      x = 1; //定義變量x
      A = function(){...}; //定義函數A
      A[[scope]] = this; //定義A的scope,A[[scope]] == VO(G)
    }
  }
];

三、 執行函數B

函數A被執行以後,返回了B的引用,並賦值給了變量C,執行 C(1) 就相當於執行B(1),JS引擎需要完成以下工作:

首先,還和上面一樣,創建函數B的執行環境EC,然後EC推入執行環境棧的頂部並獲取執行權。 此時執行環境棧中有兩個執行環境,分別是全局執行環境和函數B的執行環境,B的執行環境在棧頂,全局執行環境在棧的底部。(注意:當函數A返回後,A的執行環境就會從棧中被刪除,只留下全局執行環境)然後,創建函數B的作用域鏈,並初始化為函數B的scope所包含的對象,即包含了A的作用域鏈。最後,創建函數B的活動對象AO,並將B的形參z, arguments對象 和 this對象作為AO的屬性。此時ECStack將會變成這樣:

ECStack = [  //執行環境棧
  EC(B) = {  //創建B的執行環境,並處於作用域鏈的頂端
    [scope]:AO(A), //指向函數A的作用域鏈,AO(A)->VO(G)
    var AO(B) = { //創建函數B的活動對象
      z:1,
      arguments:[],
      this:window
    }
    scopeChain:<AO(B),B[[scope]]> //鏈表初始化為B[[scope]],再將AO(B)加入鏈表表頭,此時B的作用域鏈:AO(B)->AO(A)-VO(G)
  },
  EC(A), //A的執行環境已經從棧頂被刪除,
  EC(G) = {  //全局執行環境
    VO:{ //定義全局變量對象
      ... //包含全局對象原有的屬性
      x = 1; //定義變量x
      A = function(){...}; //定義函數A
      A[[scope]] = this; //定義A的scope,A[[scope]] == VO(G)
    }
  }
];

當函數B執行“x+y+z”時,需要對x、y、z 三個標識符進行一一解析,解析過程遵守變量查找規則:先查找自己的活動對象中是否存在該屬性,如果存在,則停止查找並返回;如果不存在,繼續沿著其作用域鏈從頂端依次查找,直到找到為止,如果整個作用域鏈上都未找到該變量,則返回“undefined”。從上面的分析可以看出函數B的作用域鏈是這樣的:

AO(B)->AO(A)->VO(G)

因此,變量x會在AO(A)中被找到,而不會查找VO(G)中的x,變量y也會在AO(A)中被找到,變量z 在自身的AO(B)中就找到了。所以執行結果:2+1+1=4.

 簡單的總結語

了解了JS引擎的工作機制之後,我們不能只停留在理解概念的層面,而要將其作為基礎工具,用以優化和改善我們在實際工作中的代碼,提高執行效率,產生實際價值才是我們的真正目的。就拿變量查找機制來說,如果你的代碼嵌套很深,每引用一次全局變量,JS引擎就要查找整個作用域鏈,比如處於作用域鏈的最底端window和document對象就存在這個問題,因此我們圍繞這個問題可以做很多性能優化的工作,當然還有其他方面的優化,此處不再贅述,本文僅當作拋磚引玉吧!

感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved