js建立物件

qingyezhu發表於2015-10-25
JS物件

Java程式碼  收藏程式碼
  1. //定義一個apple物件的建構函式    
  2. function Apple{    
  3.     this.color='red';    
  4. }    
  5. //建立一個apple物件    
  6. var apple1 = new Apple（）；    
  7. //我還可以這麼建立apple物件    
  8. var apple2 = {    
  9.  color:'red';    
  10. }    
  11. 這兩個apple物件在記憶體中都是完全一樣的。只不過js提供了兩種建立方式而已。   

 

1、工廠方式：

Java程式碼  收藏程式碼
  1. function createCar(colors,doors){  
  2.     var tempCar = new object();  
  3.     tempCar.colors = colors;  
  4.     tempCar.doors = doors;  
  5.     tempCar.showColor = function showColor(){  
  6.         alert(this.color);  
  7.     };  
  8. }  

 缺點：不像常用的物件導向宣告的方式;每宣告一個Car例項，就要建立多一個showColor函式，不能複用，浪費記憶體 。

 

2、建構函式的方式:

Java程式碼  收藏程式碼
  1. function Car(colors,doors){  
  2.     this.colors = colors;  
  3.     this.doors = doors;  
  4.     this.showColor = function showColor(){  
  5.         alert(this.color);  
  6. }  

 優點：以更物件導向的方式
 缺點：每宣告一個Car例項，就要建立多一個showColor函式，不能複用，浪費記憶體。 

3、prototype原形的方式：
//首先定義建構函式

Java程式碼  收藏程式碼
  1. function Car(){  
  2.   
  3. }  
  4. Car.prototype.colors = "red";  
  5. Car.prototype.doors = 4;  
  6. Car.prototype.showColor = function(){  
  7.     alert(this.colors);  
  8. };  

 //以上面的定義原形建立Car
var car1 = new Car();
var car2 = new Car();

優點：重用程式碼，car1.showColor，car2.showColor指向的是同一個函式位置。
缺點：建構函式沒有引數，不能在呼叫建構函式時，自定義自己的Car。
注：這個缺點可以這樣解決：var car1 = new Car();宣告後，再指定它自己的欄位和方法：car1.doors = 6;
也可以改變方法指標指向另一個方法：car1.showColor = changeColor;


綜合解決以上問題的方法：
4、聯合使用建構函式和原形方式：

Java程式碼  收藏程式碼
  1. function Car(colors,doors){  
  2.     this.colors = colors;  
  3.     this.doors = doors;  
  4. }  
  5. Car.prototype.showColor = function showColor(){  
  6.     alert(this.color);  
  7. };  
  8. var car1 = new Car("red",4);  
  9. var car2 = new Car("blue",6);  

 優點：這樣一來便很好地解決了上面的問題，在呼叫建構函式時，自定義自己的Car；也解決了方法複用的問題。

 

prototype就是“一個給類的物件新增方法的方法”，使用prototype屬性，可以給類動態地新增方法。 
當你用prototype編寫一個類後，如果new一個新的物件，瀏覽器會自動把prototype中的內容替你附加在物件上。這樣，通過利用prototype就可以在JavaScript中實現成員函式的定義，甚至是“繼承”的效果。

 

 

http://blog.csdn.net/xiaoyuemian/archive/2009/01/20/3844305.aspx

 

Java程式碼  收藏程式碼
  1. function Hotel () {  
  2.         this.hotelName = "";  
  3.         this.hotelId = "";  
  4.         this.star = "";  
  5.         this.city = "";  
  6.         this.zone = "";  
  7.         this.rooms = [];          
  8.     }  
  9.   
  10.     // get and set zone  
  11.     Hotel.prototype.setZone = function (zone) {  
  12.         this.zone = zone;     
  13.     };  
  14.       
  15.     Hotel.prototype.getZone = function () {  
  16.         return this.zone;     
  17.     };  
  18.   
  19.         Hotel.prototype.setRooms = function (room) {  
  20.         this.rooms[this.rooms.length] = room;  
  21.     };  
  22.       
  23.     Hotel.prototype.getRooms = function (idx) {  
  24.         return (idx >= 0 && idx < this.rooms.length) ? this.rooms[idx] : "";  
  25.     };  

 

 

 

1、

Java程式碼  收藏程式碼
  1. for(var i=0; i<recordList.length; i++){  
  2.         fileCtrl.addFileList.push(recordList[i]);  
  3.         fileCtrl.currFileList.push(recordList[i]);  
  4.     }  
  5.     alert(JSON.stringify(fileCtrl));  

 

2、

Java程式碼  收藏程式碼
  1. var fileObjArr = [];  
  2. var length = _tr.length;  
  3. _tr.not(":first").each(function(i){  
  4.     var qFile = new EipQuestionFile();  
  5.     qFile.setFileCode(filecode);  
  6.     qFile.setRemark(remark);  
  7.     fileObjArr[fileObjArr.length] = qFile;  
  8. });  
  9. $("#uploadFileList").val(JSON.stringify(fileObjArr));  
  10.     //否則無法講其作為Str傳輸過去  
  11.   
  12. function EipQuestionFile(){  
  13.     this.fileCode = '';  
  14.     this.remark = '';             
  15. }  
  16. EipQuestionFile.prototype.setFileCode = function (fileCode) {  
  17.     this.fileCode = fileCode;     
  18. };  
  19. EipQuestionFile.prototype.setRemark    = function(remark){  
  20.     this.remark = remark;  
  21. }  

 ..

 

JS中建立物件的幾種常用方法：

1. 簡單物件字面量

這是最簡單的建立物件的方法，也是經常在入門書籍中看到的方法：

//建立一個簡單物件字面量
var person = {};    

// 加入屬性和方法
person.name = 'ifcode';
person.setName = function(theName) {
   person.name = theName;
}

非常簡單，但一般情況下不推薦這種方法。JS good parts書中認為這種寫法可讀性不夠強，作者推薦的是後面一種寫法。

2. 巢狀物件字面量

JS good parts中推薦這種寫法:

var person = {
    name: 'ifcode',
    setName: function(theName) {
        this.name = theName;
    }
}

這種寫法可讀性很強，person物件的所有屬性和方法都包含在其身體內，先的一目瞭然。

以上兩種寫法適用於只存在一個例項的物件，也就是某種意義上的singlton pattern。

下面介紹的幾種方法比較適用於建立多個物件例項。

3. 簡單建構函式

建構函式一般都符合factory pattern，根據預設的規則，建構函式應當首字母大寫：

Person = function(defaultName) {
    this.name = defaultName;
    this.setName = function(theName) {
        this.name = theName;
    }
}

person = new Person('ifcode');

利用建構函式就可以方便地建立多個物件例項了。

4. 使用原型（prototype）的建構函式

這裡簡單回顧一下prototype的作用。prototype或許是某種意義上最接近傳統OOP中class的東西了。所有建立在prototype上得屬性和方法，都將被所有物件例項分享。

Person = function(defaultName) {
    this.name = defaultName;
}

Person.prototype.setName = function(theName) {
    this.name = theName;
}

其實建立物件的方法還有很多，這些過於靈活的方法也是許多人在初接觸JS時感到困惑的原因。我個人比較偏向2和4：單一例項用2，多個例項用4。

相關文章