(轉)JavaScript對象模型-執行模型

轉貼一篇講Javascript的文章,文章寫的很好!數組

原文http://blog.csdn.net/wu9xia/archive/2008/04/28/2339952.aspx數據結構

數據類型
基本數據類型
基本數據類型是JS語言最底層的實現。
簡單數值類型: 有Undefined, Null, Boolean, Number和String。注意,描述中的英文單詞在這裏僅指數據類型的名稱,並不特指JS的全局對象N an, Boolean, Number, String等,它們在概念上的區別是比較大的。
對象: 一個無序屬性的集合,這些屬性的值爲簡單數值類型、對象或者函數。同上,這裏的對象並不特指全局對象Object。
函數: 函數是對象的一種,實現上內部屬性[[Class]]值爲"Function",代表它是函數類型,除了對象的內部屬性方法外,還有 [[Construct]]、[[Call]]、[[Scope]]等內部屬性。函數做爲函數調用與構造器(使用new關鍵字建立實例對象)的處理機制不 同樣(Function對象除外),內部方法[[Construct]]用於實現做爲構造器的邏輯,方法[[Call]]實現做爲函數調用的邏輯。同上, 這裏的函數並不特指全局對象Function。
函數在JS這個Prototype語言中能夠看做是面嚮對象語言的類,能夠用它來構造對象實例。既然函數能夠看做是類,因此每個函數能夠看做是一種擴展數據類型。

內置數據類型(內置對象)
Function: 函數類型的用戶接口。
Object: 對象類型的用戶接口。
Boolean, Number, String: 分別爲這三種簡單數值類型的對象包裝器,對象包裝在概念上有點相似C#中的Box/Unbox。
Date, Array, RegExp: 能夠把它們看做是幾種內置的擴展數據類型。

首先,Function, Object, Boolean, Number, String, Date, Array, RegExp等都是JavaScript語言的內置對象,它們均可以看做是函數的派生類型,例如Number instanceof Function爲true,Number instanceof Object爲true。在這個意義上,能夠將它們跟用戶定義的函數等同看待。
其次,它們各自能夠表明一種數據類型,由JS引擎用native code或內置的JS代碼實現,是暴露給開發者對這些內置數據類型進行操做的接口。在這個意義上,它們都是一種抽象的概念,後面隱藏了具體的實現機制。
在每個提到Number, Function等單詞的地方,應該迅速的在思惟中將它們實例化爲上面的兩種狀況之一。

數據類型實現模型描述
   
Build-in *** data structure: 指JS內部用於實現***類型的數據結構,這些結構咱們基本上沒法直接操做。
Build-in *** object: 指JS內置的Number, String, Boolean等這些對象,這是JS將內部實現的數據類型暴露給開發者使用的接口。
Build-in *** constructor: 指JS內置的一些構造器,用來構造相應類型的對象實例。它們被包裝成函數對象暴露出來,例如咱們可使用下面的方法訪問到這些函數對象:app

<

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

> //Passed in FF2.0, IE7, Opera9.25, Safari3.0.4
//
access the build-in number constructor
var  number  =   new  Number( 123 );
var  numConstructor1  =  number.constructor;  // or
var  numConstructor2  =   new  Object( 123 ).constructor;
// both numConstructor1 and numConstructor2 are the build-in Number constructor
numConstructor1  ==  numConstructor2  // result: true
//
access the build-in object constructor
var  objConstructor1  =  {}.constructor;  // or
var  objConstructor2  =   new  Object().constructor;
// both objConstructor1 and objConstructor2 are the build-in Object constructor
objConstructor1 == objConstructor2  // result: true


具體實現上,上圖中橫向之間可能也存在關聯,例如對於build-in data structure和constructor,Function、 Date、 Array、 RegExp等均可以繼承Object的結構而實現,但這是具體實現相關的事情了。

關於簡單數值類型的對象化
這是一個細微的地方,下面描述對於Boolean, String和Number這三種簡單數值類型都適用,以Number爲例說明。
JS規範要求: 使用var num1=123;這樣的代碼,直接返回基本數據類型,就是說返回的對象不是派生自Number和Object類型,用num1 instanceof Object測試爲false;使用new關鍵字建立則返回Number類型,例如var num2=new Number(123); num2 instanceof Number爲true。
將Number看成函數調用,返回結果會轉換成簡單數值類型。下面是測試代碼:函數

<

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

> // Passed in FF2.0, IE7, Opera9.25, Safari3.0.4
var  num1  =   new  Number( 123 );  // num1 derived from Number & Object
num1  instanceof  Number  // result: true
num1  instanceof  Object  // result: true
// convert the num1 from Number type to primitive type, so it's no longer an instance of Number or Object
num1  =  Number(num1);
num1  instanceof  Number  // result: false
num1  instanceof  Object  // result: false
var  num2  =   123 // num2 is a primitive type
num2  instanceof  Number  // result: false
num2  instanceof  Object  // result: false

雖然咱們獲得了一個簡單數值類型,但它看起來仍然是一個JS Object對象,具備Object以及相應類型的全部屬性和方法,使用上基本沒有差異,惟一不一樣之處是instanceof的測試結果。

Prototype繼承
Prototype

每一個對象都有一個[[Prototype]]的內部屬性,它的值爲null或者另一個對象。函數對象都有一個顯示的prototype屬性,它並非內 部[[Prototype]]屬性。不一樣的JS引擎實現者能夠將內部[[Prototype]]屬性命名爲任何名字,而且設置它的可見性,只在JS引擎內 部使用。雖然沒法在JS代碼中訪問到內部[[Prototype]](FireFox中能夠,名字爲__proto__由於Mozilla將它公開了), 但可使用對象的isPrototypeOf()方法進行測試,注意這個方法會在整個Prototype鏈上進行判斷。
使用obj.propName訪問一個對象的屬性時,按照下面的步驟進行處理(假設obj的內部[[Prototype]]屬性名爲__proto__):
1. 若是obj存在propName屬性,返回屬性的值,不然
2. 若是obj.__proto__爲null,返回undefined,不然
3. 返回obj.__proto__.propName
調用對象的方法跟訪問屬性搜索過程同樣,由於方法的函數對象就是對象的一個屬性值。
提示: 上面步驟中隱含了一個遞歸過程,步驟3中obj.__proto__是另一個對象,一樣將採用1, 2, 3這樣的步驟來搜索propName屬性。

例以下圖所示,object1將具有屬性prop1, prop2, prop3以及方法fn1, fn2, fn3。圖中虛線箭頭表示prototype鏈。
   
這就是基於Prototype的繼承和共享。其中object1的方法fn2來自object2,概念上即object2重寫了object3的方法fn2。
JavaScript對象應當都經過prototype鏈關聯起來,最頂層是Object,即對象都派生自Object類型。

相似C++等面嚮對象語言用類(被抽象了的類型)來承載方法,用對象(實例化對象)承載屬性,Prototype語言只用實例化的對象來承載方法和屬性。本質區別是前者基於內存結構的描述來實現繼承,後者基於具體的內存塊實現。

對象建立過程
JS中只有函數對象具有類的概念,所以要建立一個對象,必須使用函數對象。函數對象內部有[[Construct]]方法和[[Call]]方法, [[Construct]]用於構造對象,[[Call]]用於函數調用,只有使用new操做符時才觸發[[Construct]]邏輯。
var obj=new Object(); 是使用內置的Object這個函數對象建立實例化對象obj。var obj={};和var obj=[];這種代碼將由JS引擎觸發Object和Array的構造過程。function fn(){}; var myObj=new fn();是使用用戶定義的類型建立實例化對象。

new Fn(args)的建立過程以下(即函數對象的[[Construct]]方法處理邏輯,對象的建立過程)。另外函數對象自己的建立過程(指定義函數或者用Function建立一個函數對象等方式)雖然也使用了下面的處理邏輯,但有特殊的地方,後面再描述。
1. 建立一個build-in object對象obj並初始化
2. 若是Fn.prototype是Object類型,則將obj的內部[[Prototype]]設置爲Fn.prototype,不然obj的[[Prototype]]將爲其初始化值(即Object.prototype)
3. 將obj做爲this,使用args參數調用Fn的內部[[Call]]方法
    3.1 內部[[Call]]方法建立當前執行上下文
    3.2 調用F的函數體
    3.3 銷燬當前的執行上下文
    3.4 返回F函數體的返回值,若是F的函數體沒有返回值則返回undefined
4. 若是[[Call]]的返回值是Object類型,則返回這個值,不然返回obj
注意步驟2中, prototype指對象顯示的prototype屬性,而[[Prototype]]則表明對象內部Prototype屬性(隱式的)。
構成對象Prototype鏈的是內部隱式的[[Prototype]],而並不是對象顯示的prototype屬性。顯示的prototype只有在函數 對象上纔有意義,從上面的建立過程能夠看到,函數的prototype被賦給派生對象隱式[[Prototype]]屬性,這樣根據Prototype規 則,派生對象和函數的prototype對象之間才存在屬性、方法的繼承/共享關係。

用代碼來作一些驗證:測試

<

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

> //Passed in FF2.0, IE7, Opera9.25, Safari3.0.4
function  fn(){}
// the value of implicit [[Prototype]] property of those objects derived from fn will be assigned to fn.prototype
fn.prototype = { attr1: " aaa " , attr2: " bbb " };
var  obj = new  fn();
document.write(obj.attr1 
+   " <br /> " );  // result: aaa
document.write(obj.attr2  +   " <br /> " );  // result: bbb
document.write(obj  instanceof  fn);  // result: true
document.write( " <br /> " );
// I change the prototype of fn here, so by the algorithm of Prototype the obj is no longer the instance of fn,
//
but this won't affect the obj and its [[Prototype]] property, and the obj still has attr1 and attr2 properties
fn.prototype = {};
document.write(obj.attr1 
+   " <br /> " );  // result: aaa
document.write(obj.attr2  +   " <br /> " );  // result: bbb
document.write(obj  instanceof  fn);  // result: false

關於建立過程返回值的驗證:ui

<

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

> // Passed in FF2.0, IE7, Opera9.25, Safari3.0.4
function  fn(){
   
//according to step 4 described above,
    // the new fn() operation will return the object { attr1: 111, attr2: 222 }, it's not an instance of fn!
     return  { attr1:  111 , attr2:  222  };
}
fn.prototype
= { attr1: " aaa " , attr2: " bbb " };
var  obj = new  fn();
document.write(obj.attr1 
+   " <br /> " );  // result: 111
document.write(obj.attr2  +   " <br /> " );  // result: 222
document.write(obj  instanceof  fn);  // result: false


作個練習
通過上面的理解應,請寫出下面這幅圖的實現代碼。圖中CF是一個函數,Cfp是CF的prototype對象,cf1, cf2, cf3, cf4, cf5都是CF的實例對象。虛線箭頭表示隱式Prototype關係,實線箭頭表示顯示prototype關係。
   
供參考的實現方案:this

<

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

> // Passed in FF2.0, IE7, Opera9.25, Safari3.0.4
function  CF(q1, q2){
    
this .q1 = q1;
    
this .q2 = q2;
}
CF.P1
= "P1 in CF"; 
CF.P2
= "P2 in CF" ;
function  Cfp(){
    
this .CFP1 = " CFP1 in Cfp " ;
}
CF.prototype
= new  Cfp();
var  cf1 = new  CF( " aaa " " bbb " );
document.write(cf1.CFP1 
+   " <br /> " );  // result: CFP1 in Cfp
document.write(cf1.q1  +   " <br /> " );  // result: aaa
document.write(cf1.q2  +   " <br /> " );  // result: bbb


本地屬性與繼承屬性
對象經過隱式Prototype鏈可以實現屬性和方法的繼承,但prototype也是一個普通對象,就是說它是一個普通的實例化的對象,而不是純粹抽象的數據結構描述。因此就有了這個本地屬性與繼承屬性的問題。
首先看一下設置對象屬性時的處理過程。JS定義了一組attribute,用來描述對象的屬性property,以代表屬性property是否能夠在JavaScript代碼中設值、被for in枚舉等。
obj.propName=value的賦值語句處理步驟以下:
1. 若是propName的attribute設置爲不能設值,則返回
2. 若是obj.propName不存在,則爲obj建立一個屬性,名稱爲propName
3. 將obj.propName的值設爲value
能夠看到,設值過程並不會考慮Prototype鏈,道理很明顯,obj的內部[[Prototype]]是一個實例化的對象,它不只僅向obj共享屬性,還可能向其它對象共享屬性,修改它可能影響其它對象。
用上面CF, Cfp的示例來講明,實例對象cf1具備本地屬性q1, q2以及繼承屬性CFP1,若是執行cf1.CFP1="",那麼cf1就具備本地屬性CFP1了,測試結果以下:spa

<

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

> // Passed in FF2.0, IE7, Opera9.25, Safari3.0.4
var  cf1 = new  CF( " aaa " " bbb " );
var  cf2 = new  CF( 111 222 );
document.write(cf1.CFP1 
+   " <br /> " );  // result: CFP1 in Cfp
document.write(cf2.CFP1  +   " <br /> " );  // result: CFP1 in Cfp
// it will result in a local property in cf1
cf1.CFP1 = " new value for cf1 " ;
// changes on CF.prototype.CFP1 will affect cf2 but not cf1, because there's already a local property with
//the name CFP1 in cf1, but no such one in cf2
CF.prototype.CFP1 = " new value for Cfp " ;
document.write(cf1.CFP1 
+   " <br /> " );  // result: new value for cf1
document.write(cf2.CFP1  +   " <br /> " );  // result: new value for Cfp


語義上的混亂?
仍是使用上面CF, Cfp示例的場景。
根據Prototype的機制,咱們能夠說對象cf1, cf2等都繼承了對象Cfp的屬性和方法,因此應該說他們之間存在繼承關係。屬性的繼承/共享是沿着隱式Prototype鏈做用的,因此繼承關係也應當理解爲沿着這個鏈。
咱們再看instanceOf操做,只有cf1 instanceOf CF才成立,咱們說cf1是CF的實例對象,CF充當了類的角色,而不會說cf1是Cfp的實例對象,這樣咱們應當說cf1繼承自CF? 但CF充當的只是一個第三方工廠的角色,它跟cf1之間並無屬性繼承這個關係。
把CF, Cfp看做一個總體來理解也一樣牽強。

Prototype就是Prototype,沒有必要強把JavaScript與面向對象概念結合起來, JavaScript只具有有限的面向對象能力,從另外的角度咱們能夠把它當作函數語言、動態語言,因此它是吸取了多種語言特性的精簡版。

對象模型
Where are we?
1. 瞭解了JavaScript的數據類型,清楚了象Number這樣的系統內置對象具備多重身份: a)它們自己是一個函數對象,只是由引擎內部實現而已,b)它們表明一種數據類型,咱們能夠用它們定義、操做相應類型的數據,c)在它們背後隱藏了引擎的 內部實現機制,例如內部的數據結構、各類被包裝成了JavaScript對象的構造器等。
2. 瞭解了Prototype機制,知道對象是如何經過它們繼承屬性和方法,知道了在建立對象過程當中JS引擎內部是如何設置Prototype關係的。

接下來對用戶自定義函數對象自己的建立過程進行了解以後,咱們就能夠對JavaScript的對象模型來一個總體性的overview了。

函數對象建立過程
JavaScript代碼中定義函數,或者調用Function建立函數時,最終都會以相似這樣的形式調用Function函數:var newFun=Function(funArgs, funBody); 。建立函數對象的主要步驟以下:
1. 建立一個build-in object對象fn
2. 將fn的內部[[Prototype]]設爲Function.prototype
3. 設置內部的[[Call]]屬性,它是內部實現的一個方法,處理邏輯參考對象建立過程的步驟3
4. 設置內部的[[Construct]]屬性,它是內部實現的一個方法,處理邏輯參考對象建立過程的步驟1,2,3,4
5. 設置fn.length爲funArgs.length,若是函數沒有參數,則將fn.length設置爲0
6. 使用new Object()一樣的邏輯建立一個Object對象fnProto
7. 將fnProto.constructor設爲fn
8. 將fn.prototype設爲fnProto
9. 返回fn
步驟1跟步驟6的區別爲,步驟1只是建立內部用來實現Object對象的數據結構(build-in object structure),並完成內部必要的初始化工做,但它的[[Prototype]]、[[Call]]、[[Construct]]等屬性應當爲 null或者內部初始化值,即咱們能夠理解爲不指向任何對象(對[[Prototype]]這樣的屬性而言),或者不包含任何處理(對[[Call]]、 [[Construct]]這樣的方法而言)。步驟6則將按照前面描述的對象建立過程建立一個新的對象,它的[[Prototype]]等被設置了。
從上面的處理步驟能夠了解,任什麼時候候咱們定義一個函數,它的prototype是一個Object實例,這樣默認狀況下咱們建立自定義函數的實例對象時,它們的Prototype鏈將指向Object.prototype。
另外,Function一個特殊的地方,是它的[[Call]]和[[Construct]]處理邏輯同樣。

JavaScript對象模型
   
紅色虛線表示隱式Prototype鏈。
 這張對象模型圖中包含了太多東西,很多地方須要仔細體會,能夠寫些測試代碼進行驗證。完全理解了這張圖,對JavaScript語言的瞭解也就差很少了。下面是一些補充說明:
1. 圖中有好幾個地方提到build-in Function constructor,這是同一個對象,能夠測試驗證:.net

<

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

> // Passed in FF2.0, IE7, Opera9.25, Safari3.0.4
Function == Function.constructor  // result: true
Function == Function.prototype.constructor  // result: true
Function == Object.constructor  // result: true
//
Function also equals to Number.constructor, String.constructor, Array.constructor, RegExp.constructor, etc.
function  fn(){}
Function
== fn.constructor  // result: true

這說明了幾個問題: Function指向系統內置的函數構造器(build-in Function constructor);Function具備自舉性;系統中全部函數都是由Function構造。

2. 左下角的obj1, obj2...objn範指用相似這樣的代碼建立的對象: function fn1(){}; var obj1=new fn1();
    這些對象沒有本地constructor方法,但它們將從Prototype鏈上獲得一個繼承的constructor方法,即fn.prototype.constructor,從函數對象的構造過程能夠知道,它就是fn自己了。
    右下角的obj1, obj2...objn範指用相似這樣的代碼建立的對象: var obj1=new Object();或var obj1={};或var obj1=new Number(123);或obj1=/\w+/;等等。因此這些對象Prototype鏈的指向、從Prototype鏈繼承而來的 constructor的值(指它們的constructor是build-in Number constructor仍是build-in Object constructor等)等依賴於具體的對象類型。另外注意的是,var obj=new Object(123);這樣建立的對象,它的類型仍然是Number,即一樣須要根據參數值的類型來肯定。
    一樣它們也沒有本地constructor,而是從Prototype鏈上得到繼承的constructor方法,即build-in *** constructor,具體是哪個由數據類型肯定。

3. 關於圖中Prototype鏈的補充說明:
Object.prototype是整個鏈的終結點,它的內部[[Prototype]]爲null。
全部函數的Prototype鏈都指向Function.prototype。
Function的Prototype鏈指向Function.prototype,這是規範要求的,由於設計者將Function設計爲具備自舉性。 Function的Prototype鏈這樣設計以後,Function.constructor==Function, Function instanceOf Function都爲true。另外Function已是最頂層的構造器,但Function自己也是一個函數對象,它必然是由某個東西建立出來的,這 樣自舉在語義上合情合理。
Function.prototype的Prototype鏈指向Object.prototype,這也是規範強制要求的。首先 Function.prototype是Function的一個實例對象(typeof Function.prototype能夠知道它是一個Function,instanceOf沒法經過測試,由於Prototype鏈在內部被額外設置 了),因此按照Prototype的規則,Function.prototype的內部[[Prototype]]值應當爲 Function.prototype這個對象,即它的Prototype鏈指向本身自己。這樣一方面在Prototype鏈上形成一個死循環,另外一方面 它自己成爲了一個終結點,結果就是全部函數對象將不是派生自Object了。加上這個強制要求以後,Prototype鏈只有惟一的一個終結點。

4. 由於Function.prototype是一個函數對象,因此它應當具備顯示的prototype屬性,即 Function.prototype.prototype,但只有FireFox中能夠訪問到,IE、Opera、Safari都沒法訪問。因此圖中用 了個表示不存在的符號。

5. 用戶自定義函數(user defined functions)默認狀況下[[Prototype]]值是Object.prototype,即它的隱式Prototype鏈指向 Object.prototype,因此圖中就這樣表示了,但並不表明老是這樣,當用戶設置了自定義函數的prototype屬性以後,狀況就不一樣了。

執行模型
執行上下文(Execution Context)簡介
JavaScript代碼運行的地方都存在執行上下文,它是一個概念,一種機制,用來完成JavaScript運行時做用域、生存期等方面的處理。執行上 下文包括Variable Object、Variable Instatiation、Scope/Scope Chain等概念,在不一樣的場景/執行環境下,處理上存在一些差別,下面先對這些場景進行說明。

函數對象分爲用戶自定義函數對象和系統內置函數對象,對於用戶自定義函數對象將按照下面描述的機制進行處理,但內置函數對象與具體實現相關,ECMA規範對它們執行上下文的處理沒有要求,即它們基本不適合本節描述的內容。

執行的JavaScript代碼分三種類型,後面會對這三種類型處理上不一樣的地方進行說明:
1. Global Code,即全局的、不在任何函數裏面的代碼,例如一個js文件、嵌入在HTML頁面中的js代碼等。
2. Eval Code,即便用eval()函數動態執行的JS代碼。
3. Function Code,即用戶自定義函數中的函數體JS代碼。

基本原理
在用戶自定義函數中,能夠傳入參數、在函數中定義局部變量,函數體代碼可使用這些入參、局部變量。背後的機制是什麼樣呢?
當JS執行流進入函數時,JavaScript引擎在內部建立一個對象,叫作Variable Object。對應函數的每個參數,在Variable Object上添加一個屬性,屬性的名字、值與參數的名字、值相同。函數中每聲明一個變量,也會在Variable Object上添加一個屬性,名字就是變量名,所以爲變量賦值就是給Variable Object對應的屬性賦值。在函數中訪問參數或者局部變量時,就是在variable Object上搜索相應的屬性,返回其值。
通常狀況下Variable Object是一個內部對象,JS代碼中沒法直接訪問。規範中對其實現方式也不作要求,所以它可能只是引擎內部的一種數據結構。

大體處理方式就這樣,但做用域的概念不僅這麼簡單,例如函數體中可使用全局變量、函數嵌套定義時狀況更復雜點。這些狀況下怎樣處理? JavaScript引擎將不一樣執行位置上的Variable Object按照規則構建一個鏈表,在訪問一個變量時,先在鏈表的第一個Variable Object上查找,若是沒有找到則繼續在第二個Variable Object上查找,直到搜索結束。這就是Scope/Scope Chain的大體概念。

下面是各個方面詳細的處理。

Global Object
JavaScript的運行環境都必須存在一個惟一的全局對象-Global Object,例如HTML中的window對象。Global Object是一個宿主對象,除了做爲JavaScript運行時的全局容器應具有的職責外,ECMA規範對它沒有額外要求。它包Math、 String、Date、parseInt等JavaScript中內置的全局對象、函數(都做爲Global Object的屬性),還能夠包含其它宿主環境須要的一些屬性。

Variable Object
上面簡述了Variable Object的基本概念。建立Variable Object,將參數、局部變量設置爲Variable Object屬性的處理過程叫作Variable Instatiation-變量實例化,後面結合Scope Chain再進行詳細說明。

Global Code
Variable Object就是Global Object,這是Variable Object惟一特殊的地方(指它是內部的沒法訪問的對象而言)。prototype

<

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

> var  globalVariable  =   " WWW " ;
document.write(window.globalVariable); 
// result: WWW

上面代碼在Global Code方式下運行,根據對Variable Object的處理,定義變量globalVariable時就會在Global Object(即window)對象上添加這個屬性,因此輸出是WWW這個值。

Function Code
Variable Object也叫作Activation Object(由於有一些差別存在,因此規範中從新取一個名字以示區別,Global Code/Eval Code中叫Variable Object,Function Code中就叫作Activation Object)。
每次進入函數執行都會建立一個新的Activation Object對象,而後建立一個arguments對象並設置爲Activation Object的屬性,再進行Variable Instantiation處理。
在退出函數時,Activation Object會被丟棄(並非內存釋放,只是能夠被垃圾回收了)。

附arguments對象的屬性:
length: 爲實際傳入參數的個數。注意,參考函數對象建立過程,函數對象上的length爲函數定義時要求的參數個數;
callee: 爲執行的函數對象自己。目的是使函數對象可以引用本身,例如須要遞歸調用的地方。
function fnName(...) { ... }這樣定義函數,它的遞歸調用能夠在函數體內使用fnName完成。var fn=function(...) { ... }這樣定義匿名函數,在函數體內沒法使用名字引用本身,經過arguments.callee就能夠引用本身而實現遞歸調用。
參數列表: 調用者實際傳入的參數列表。這個參數列表提供一個使用索引訪問實際參數的方法。Variable Instantiation處理時會在Activation Object對象上添加屬性,前提是函數聲明時有指定參數列表。若是函數聲明中不給出參數列表,或者實際調用參數個數與聲明時的不同,能夠經過 arguments訪問各個參數。

arguments中的參數列表與Activation Object上的參數屬性引用的是相同的參數對象(若是修改,在兩處都會反映出來)。規範並不要求arguments是一個數組對象,下面是一個測試:

<

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

> // Passed in FF2.0, IE7, Opera9.25, Safari3.0.4
var  argumentsLike  =  {  0 " aaa " 1 222 2 " WWW " , length:  3 , callee:  function () { } };
document.write(argumentsLike[
2 +   " <br /> " );  // result: WWW
document.write(argumentsLike[ 1 +   " <br /> " );  // result: 222
//
convert the argumentsLike to an Array object, just as we can do this for the arguments property
var  array  =  [].slice.apply(argumentsLike);
document.write(array 
instanceof  Array);  // result: true
document.write( " <br /> " );
document.write(array.reverse().join(
" | " ));  // result: WWW|222|aaa


Eval Code
Variable Object就是調用eval時當前執行上下文中的Variable Object。在Global Code中調用eval函數,它的Variable Object就是Global Object;在函數中調用eval,它的Variable Object就是函數的Activation Object。

<

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

> // Passed in FF2.0, IE7, Opera9.25, Safari3.0.4
function  fn(arg){
    
var  innerVar  =   " variable in function " ;
    eval(
'  \
        var evalVar = "variable in eval"; \
        document.write(arg + "<br />"); \
        document.write(innerVar + "<br />"); \
    
' );
    document.write(evalVar);
}
fn(
" arguments for function " );

輸出結果是:
arguments for function
variable in function
variable in eval
說明: eval調用中能夠訪問函數fn的參數、局部變量;在eval中定義的局部變量在函數fn中也能夠訪問,由於它們的Varible Object是同一個對象。

Scope/Scope Chain
首先Scope Chain是一個相似鏈表/堆棧的結構,裏面每一個元素基本都是Variable Object/Activation Object。
其次存在執行上下文的地方都有當前Scope Chain,能夠理解爲Scope Chain就是執行上下文的具體表現形式。

Global Code
Scope Chain只包含一個對象,即Global Object。在開始JavaScript代碼的執行以前,引擎會建立好這個Scope Chain結構。

Function Code
函數對象在內部都有一個[[Scope]]屬性,用來記錄該函數所處位置的Scope Chain。
建立函數對象時,引擎會將當前執行環境的Scope Chain傳給Function的[[Construct]]方法。[[Construct]]會建立一個新的Scope Chain,內容與傳入的Scope Chain徹底同樣,並賦給被建立函數的內部[[Scope]]屬性。在前面函數對象建立過程一節中,這個處理位於步驟4和5之間。
進入函數調用時,也會建立一個新的Scope Chain,包括同一個函數的遞歸調用,退出函數時這個Scope Chain被丟棄。新建的Scope Chain第一個對象是Activation Object,接下來的內容與內部[[Scope]]上存儲的Scope Chain內容徹底同樣。

Eval Code
進入Eval Code執行時會建立一個新的Scope Chain,內容與當前執行上下文的Scope Chain徹底同樣。

實例說明
Scope Chain的原理就上面這些,必須結合JS代碼的執行、Variable Instantiation的細節處理,才能理解上面這些如何產生做用,下面用一個簡單的場景來綜合說明。假設下面是一段JavaScript的Global Code:

<

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

> var  outerVar1 = " variable in global code " ;
function  fn1(arg1, arg2){
    
var  innerVar1 = " variable in function code " ;
    
function  fn2() {  return  outerVar1 + "  -  " + innerVar1 + "  -  " + "  -  " + (arg1  +  arg2); }
    
return  fn2();
}
var  outerVar2 = fn1( 10 20 );

執行處理過程大體以下:
1. 初始化Global Object即window對象,Variable Object爲window對象自己。建立Scope Chain對象,假設爲scope_1,其中只包含window對象。
2. 掃描JS源代碼(讀入源代碼、可能有詞法語法分析過程),從結果中能夠獲得定義的變量名、函數對象。按照掃描順序:
   2.1 發現變量outerVar1,在window對象上添加outerVar1屬性,值爲undefined;
   2.2 發現函數fn1的定義,使用這個定義建立函數對象,傳給建立過程的Scope Chain爲scope_1。將結果添加到window的屬性中,名字爲fn1,值爲返回的函數對象。注意fn1的內部[[Scope]]就是 scope_1。另外注意,建立過程並不會對函數體中的JS代碼作特殊處理,能夠理解爲只是將函數體JS代碼的掃描結果保存在函數對象的內部屬性上,在函 數執行時再作進一步處理。這對理解Function Code,尤爲是嵌套函數定義中的Variable Instantiation很關鍵;
   2.3 發現變量outerVar2,在window對象上添加outerVar2屬性,值爲undefined;
3. 執行outerVar1賦值語句,賦值爲"variable in global code"。
4. 執行函數fn1,獲得返回值:
   4.1 建立Activation Object,假設爲activation_1;建立一個新的Scope Chain,假設爲scope_2,scope_2中第一個對象爲activation_1,第二個對象爲window對象(取自fn1的 [[Scope]],即scope_1中的內容);
   4.2 處理參數列表。在activation_1上設置屬性arg一、arg2,值分別爲十、20。建立arguments對象並進行設置,將arguments設置爲activation_1的屬性;
   4.3 對fn1的函數體執行相似步驟2的處理過程:
       4.3.1 發現變量innerVar1,在activation_1對象上添加innerVar1屬性,值爲undefine;
       4.3.2 發現函數fn2的定義,使用這個定義建立函數對象,傳給建立過程的Scope Chain爲scope_2(函數fn1的Scope Chain爲當前執行上下文的內容)。將結果添加到activation_1的屬性中,名字爲fn2,值爲返回的函數對象。注意fn2的內部 [[Scope]]就是scope_2;
   4.4 執行innerVar1賦值語句,賦值爲"variable in function code"。
   4.5 執行fn2:
       4.5.1 建立Activation Object,假設爲activation_2;建立一個新的Scope Chain,假設爲scope_3,scope_3中第一個對象爲activation_2,接下來的對象依次爲activation_一、window 對象(取自fn2的[[Scope]],即scope_2);
       4.5.2 處理參數列表。由於fn2沒有參數,因此只用建立arguments對象並設置爲activation_2的屬性。
       4.5.3 對fn2的函數體執行相似步驟2的處理過程,沒有發現變量定義和函數聲明。
       4.5.4 執行函數體。對任何一個變量引用,從scope_3上進行搜索,這個示例中,outerVar1將在window上找到;innerVar一、arg一、arg2將在activation_1上找到。
       4.5.5 丟棄scope_三、activation_2(指它們能夠被垃圾回收了)。
       4.5.6 返回fn2的返回值。
   4.6 丟棄activation_一、scope_2。
   4.7 返回結果。
5. 將結果賦值給outerVar2。

其它狀況下Scope Chain、Variable Instantiation處理相似上面的過程進行分析就好了。

根據上面的實例說明,就能夠解釋下面這個測試代碼的結果:

<

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

> // Passed in FF2.0, IE7, Opera9.25, Safari3.0.4
function  fn(obj){
    
return  {
        
// test whether exists a local variable "outerVar" on obj
        exists: Object.prototype.hasOwnProperty.call(obj,  " outerVar " ),
        
// test the value of the variable "outerVar"
        value: obj.outerVar
    };
}
var  result1  =  fn(window);
var  outerVar  =   " WWW " ;
var  result2  =
相關文章
相關標籤/搜索