javascript對象的property和prototype是這樣一種關係

ECMAScript可以識別兩種類型的對象,一種叫做Native Object屬於語言範疇;一種叫做Host Object,由運行環境提供例如document對象, 
Dom Node等 
Native objects是一種鬆散的結構並且可以動態的增加屬性(property),所有的屬性都有一個名字和一個值,這個值可以是另一個對象的引用 
或者是內建的數據類型(String, Number, Boolean, Null 或者 Undefined) 
下面的這個簡單的例子描述了一個javascript對象是如何設置一個屬性的值和如何讀取屬性的值的。 

賦值操作 
一個對象的屬性的創建非常簡單,直接通過賦值操作就可以完成屬性的創建。 
Java代碼  收藏代碼
  1. var objectRef = new Object(); //create a generic javascript object.  

一個名爲testNumber的屬性可以這樣創建。 
Java代碼  收藏代碼
  1. objectRef.testNumber = 5;  
  2. /* - or:- */  
  3. objectRef["testNumber"] = 5;  

如果複製的屬性名稱已經存在那麼不會再次創建這個屬性,賦值操作僅僅是重新設置屬性的值 
Java代碼  收藏代碼
  1. objectRef.testNumber = 8;  
  2. /* - or:- */  
  3. objectRef["testNumber"] = 8;  


js對象的原型(prototype)自己本身也可以是對象,也可以有屬性(property),對於js對象的(prototype)的賦值操作跟普通對象屬性的創建 
沒什麼不同。 

取值操作 
在取值操作中property和prototype就不一樣了,先看最簡單的property取值操作。 
Java代碼  收藏代碼
  1. /*爲一個對象的屬性賦值,如果這個對象沒有這個屬性,那麼在賦值操作後,這個對象就有這個屬性了 */  
  2. objectRef.testNumber = 8;  
  3. /* 讀出這個屬性的值 */  
  4. var val = objectRef.testNumber;  
  5.   
  6. /* 現在val 就得到了剛纔賦予objectRef的值8了*/  

prototype揭密 
[color=blue] 
但是所有的對象都可以有prototypes, prototypes自己也是對象,那麼他也可以有prototypes,這樣循環下去就形成了一個prototype鏈, 
這個鏈當他遇到鏈中隊形的prototype是null時中止。(Object的默認的prototype是null) 
Java代碼  收藏代碼
  1. var objectRef = new Object(); //create a generic javascript object.  

創建一個新的js對象,這時這個對象的prototype是Null,所以objectRef的prototype鏈只包含一個對象Object.prototype 
我們在看下面的代碼 
Java代碼  收藏代碼
  1. /* 構建MyObject1這個類型的構造函數 
  2.    MyObject1 - type. 
  3. */  
  4. function MyObject1(formalParameter){  
  5.     /* 爲者對象創建一個屬性名字叫testNumber 
  6.     */  
  7.     this.testNumber = formalParameter;  
  8. }  
  9.   
  10. /* 構建MyObject2這個類型的構造函數 
  11.    MyObject2 - type:- 
  12. */  
  13. function MyObject2(formalParameter){  
  14.    /* 爲者對象創建一個屬性名字叫testString*/  
  15.     this.testString = formalParameter;  
  16. }  
  17.   
  18. /* 下一步的操作會用MyObject1對象替換掉MyObject2默認的prototype屬性*/  
  19. MyObject2.prototype = new MyObject1( 8 );  
  20.   
  21. /* 最後我們創建MyObject2類型的一個對象*/  
  22.   
  23. var objectRef = new MyObject2( "String_Value" );  

objectRef這個MyObject2類型的對象有一個prototype的鏈,鏈中的第一個對象是MyObject1對象,MyObject1對象也有prototype, 
這個prototype是Object默認的prototype,Object.prototype的prototype是null,至此這條prototype鏈結束。 
當一個取值操作發生時,objectRef 的整個prototype鏈就開始工作 
Java代碼  收藏代碼
  1. var val = objectRef.testString;  

objectRef這個對象的有一個屬性叫做testString,那麼這句代碼會把testString的值賦給val 
Java代碼  收藏代碼
  1. var val = objectRef.testNumber;  

在objectRef這個對象裏並沒有testNumber這個屬性,但是val卻的到了值8,而不是undefine,這是因爲解釋器在沒有在當前對象找到要找 
的屬性後,就會去檢查這個對象的prototype,objectRef的prototype是MyObject1對象,這個對象有testNumber這個屬性,所以val得到8這個值。 
Java代碼  收藏代碼
  1. var val = objectRef.toString;  

現在val是個function的引用,這個function是Object.prototype的property,由於MyObject1和MyObject2都沒有定義toString這個property 
所以Object.prototype返回。 
Java代碼  收藏代碼
  1. 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屬性並不會被修改。下面的代碼可以驗證 
Java代碼  收藏代碼
  1. /* 構建MyObject1這個類型的構造函數 
  2.    MyObject1 - type. 
  3. */  
  4. function MyObject1(formalParameter){  
  5.     /* 爲者對象創建一個屬性名字叫testNumber 
  6.     */  
  7.     this.testNumber = formalParameter;  
  8. }  
  9.   
  10. /* 構建MyObject2這個類型的構造函數 
  11.    MyObject2 - type:- 
  12. */  
  13. function MyObject2(formalParameter){  
  14.    /* 爲者對象創建一個屬性名字叫testString*/  
  15.     this.testString = formalParameter;  
  16. }  
  17.   
  18. /* 下一步的操作會用MyObject1對象替換掉MyObject2默認的prototype屬性*/  
  19. var obj1 = new MyObject1( 8 );  
  20. MyObject2.prototype = obj1;  
  21.   
  22. /* 最後我們創建MyObject2類型的一個對象*/  
  23.   
  24. var objectRef = new MyObject2( "String_Value" );  
  25.   
  26. alert(objectRef.testNumber);  
  27. objectRef.testNumber = 5;  
  28. alert(objectRef.testNumber);  
  29. alert(obj1.testNumber);  


感覺講解得很好,類似於繼承的關係,A.prototype=new B();就相當於A的實例會繼承B的實例的屬性和方法!
發佈了26 篇原創文章 · 獲贊 71 · 訪問量 85萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章