javascript物件的property和prototype是這樣一種關係

技術小牛人發表於2017-11-15
< DOCTYPE html PUBLIC -WCDTD XHTML StrictEN httpwwwworgTRxhtmlDTDxhtml-strictdtd>

ECMAScript可以識別兩種型別的物件,一種叫做Native Object屬於語言範疇;一種叫做Host Object,由執行環境提供例如document物件,

Dom Node等

Native objects是一種鬆散的結構並且可以動態的增加屬性(property),所有的屬性都有一個名字和一個值,這個值可以是另一個物件的引用

或者是內建的資料型別(String, Number, Boolean, Null 或者 Undefined)

下面的這個簡單的例子描述了一個javascript物件是如何設定一個屬性的值和如何讀取屬性的值的。

賦值操作

一個物件的屬性的建立非常簡單,直接通過賦值操作就可以完成屬性的建立。



程式碼

var objectRef = new Object(); //create a generic javascript object.   



一個名為testNumber的屬性可以這樣建立。

程式碼

objectRef.testNumber = 5;   

  

objectRef[“testNumber”] = 5;   



如果複製的屬性名稱已經存在那麼不會再次建立這個屬性,賦值操作僅僅是重新設定屬性的值

程式碼

objectRef.testNumber = 8;   

  

objectRef[“testNumber”] = 8;   

js物件的原型(prototype)自己本身也可以是物件,也可以有屬性(property),對於js物件的(prototype)的賦值操作跟普通物件屬性的建立

沒什麼不同。

取值操作

在取值操作中property和prototype就不一樣了,先看最簡單的property取值操作。

程式碼

  

objectRef.testNumber = 8;   

  

var val = objectRef.testNumber;   

  

  



prototype揭密

但是所有的物件都可以有prototypes, prototypes自己也是物件,那麼他也可以有prototypes,這樣迴圈下去就形成了一個prototype鏈,

這個鏈當他遇到鏈中隊形的prototype是null時中止。(Object的預設的prototype是null)

程式碼

var objectRef = new Object(); //create a generic javascript object.   



建立一個新的js物件,這時這個物件的prototype是Null,所以objectRef的prototype鏈只包含一個物件Object.prototype

我們在看下面的程式碼

程式碼

  

function MyObject1(formalParameter){   

       

     this.testNumber = formalParameter;   

}   

  

  

function MyObject2(formalParameter){   

      

     this.testString = formalParameter;   

}   

  

  

MyObject2.prototype = new MyObject1( 8 );   

  

  

  

var objectRef = new MyObject2( “String_Value” );   



objectRef這個MyObject2型別的物件有一個prototype的鏈,鏈中的第一個物件是MyObject1物件,MyObject1物件也有prototype,

這個prototype是Object預設的prototype,Object.prototype的prototype是null,至此這條prototype鏈結束。

當一個取值操作發生時,objectRef 的整個prototype鏈就開始工作

程式碼

var val = objectRef.testString;   



objectRef這個物件的有一個屬性叫做testString,那麼這句程式碼會把testString的值賦給val

程式碼

var val = objectRef.testNumber;   



在objectRef這個物件裡並沒有testNumber這個屬性,但是val卻的到了值8,而不是undefine,這是因為直譯器在沒有在當前物件找到要找

的屬性後,就會去檢查這個物件的prototype,objectRef的prototype是MyObject1物件,這個物件有testNumber這個屬性,所以val得到8這個值。

程式碼

var val = objectRef.toString;   



現在val是個function的引用,這個function是Object.prototype的property,由於MyObject1和MyObject2都沒有定義toString這個property

所以Object.prototype返回。

程式碼

var val = objectRef.madeUpProperty;   



最後val是undefined,因為MyObject1和MyObject2,還有Object都沒有定義madeUpProperty這個property,所以得到的是undefine.

讀操作會讀取在obj自己和prototype 鏈上發現的第一個同名屬性值

寫操作會為obj物件本身建立一個同名屬性(如果這個屬性名不存在

這就意味著objectRef.testNumber = 3會在objectRef物件上建立一個property,名字是testNumber,當下一次在要讀取testNumber時

propertype鏈就不會工作,僅僅會得到objectRef的property 3,而MyObject1的testNumber屬性並不會被修改。下面的程式碼可以驗證



程式碼

  

function MyObject1(formalParameter){   

       

     this.testNumber = formalParameter;   

}   

  

  

function MyObject2(formalParameter){   

      

     this.testString = formalParameter;   

}   

  

  

var obj1 = new MyObject1( 8 );   

MyObject2.prototype = obj1;   

  

  

  

var objectRef = new MyObject2( “String_Value” );   

  

alert(objectRef.testNumber);   

objectRef.testNumber = 5;   

alert(objectRef.testNumber);   

alert(obj1.testNumber);

本文轉自 netcorner 部落格園部落格,原文連結http://www.cnblogs.com/netcorner/archive/2007/10/31/2912264.html  ,如需轉載請自行聯絡原作者


相關文章