1. 程式人生 > >js建立物件的幾種常用方式

js建立物件的幾種常用方式

第一種模式:工廠方式

Js程式碼 
  1. var lev=function(){  
  2.    return "啊打";  
  3. };  
  4. function Parent(){  
  5.        var  Child = new Object();  
  6.        Child.name="李小龍";  
  7.        Child.age="30";  
  8.        Child.lev=lev;  
  9.      return Child;  
  10. };  
  11. var  x = Parent();  
  12. alert(x.name);  
  13. alert(x.lev());  

 說明:

1.在函式中定義物件,並定義物件的各種屬性,,雖然屬性可以為方法,但是建議將屬性為方法的屬性定義到函式之外,這樣可以避免重複建立該方法

2.引用該物件的時候,這裡使用的是 var x = Parent()而不是 var x = new Parent();因為後者會可能出現很多問題(前者也成為工廠經典方式,後者稱之為混合工廠方式),不推薦使用new的方式使用該物件

3.在函式的最後返回該物件

4.不推薦使用這種方式建立物件,但應該瞭解

第二種模式:建構函式方式

Js程式碼 
  1. var lev=function(){  
  2.    return "啊打";  
  3. };  
  4. function Parent(){  
  5.        this.name="李小龍";  
  6.        this.age="30";  
  7.        this
    .lev=lev;  
  8. };  
  9. var  x =new  Parent();  
  10. alert(x.name);  
  11. alert(x.lev());  

說明:

1.與工廠方式相比,使用建構函式方式建立物件,無需再函式內部重建建立物件,而使用this指代,並而函式無需明確return

2.同工廠模式一樣,雖然屬性的值可以為方法,扔建議將該方法定義在函式之外

3..同樣的,不推薦使用這種方式建立物件,但仍需要了解

第3種模式:原型模式

Js程式碼 
  1. var lev=function(){  
  2.    return "啊打";  
  3. };  
  4. function Parent(){  
  5. };  
  6.   Parent.prototype.name="李小龍";  
  7.   Parent.prototype.age="30";  
  8.  Parent.prototype.lev=lev;  
  9. var  x =new  Parent();  
  10. alert(x.name);  
  11. alert(x.lev());  

 說明:

1.函式中不對屬性進行定義

2.利用prototype屬性對屬性進行定義

3.同樣的,不推薦使用這樣方式建立物件

 第四種模式:混合的建構函式,原型方式(推薦

Js程式碼 
  1. function Parent(){  
  2.   this.name="李小龍";  
  3.  this.age=32;  
  4. };   
  5. Parent.prototype.lev=function(){  
  6.    return this.name;  
  7. };;  
  8. var  x =new  Parent();  
  9. alert(x.lev());  

 說明:1.該模式是指混合搭配使用建構函式方式和原型方式

          2.將所有屬性不是方法的屬性定義在函式中(建構函式方式)

將所有屬性值為方法的屬性利用prototype在函式之外定義(原型方式)

3.推薦使用這樣方式建立物件,這樣做有好處和為什麼不單獨使用建構函式方式和原型方式,由於篇幅問題這裡不予討論

第五種模式:動態原型方式

Js程式碼 
  1. function Parent(){  
  2.   this.name="李小龍";  
  3.  this.age=32;  
  4. ;  
  5.  if(typeof Parent._lev=="undefined"){  
  6.      Parent.prototype.lev=function(){  
  7.                return this.name;  
  8.      }  
  9.      Parent._lev=true;  
  10.  }  
  11. };   
  12. var  x =new  Parent();  
  13. alert(x.lev());  

 說明:

1.動態原型方式可以理解為混合建構函式,原型方式的一個特例

2.該模式中,屬性為方法的屬性直接在函式中進行了定義,但是因為

Js程式碼 
  1. if(typeof Parent._lev=="undefined"){  
  2.           Parent._lev=true;}  

 
從而保證建立該物件的例項時,屬性的方法不會被重複建立

3.,推薦使用這種模式