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

大家知道使用類可以建立物件例項。

下面就介紹一下如何建立一個物件，方式有多種，需要的朋友可以做一下參考。

一.工廠方式:

[JavaScript] 純文字檢視 複製程式碼
function Antzone(){ 
  var obj=new Object; 
  obj.webName="螞蟻部落"; 
  obj.age=3; 
  obj.show=function(){ 
    console.log(this.webName) 
  }; 
  return obj; 
} 
var one = Antzone(); 
var two = Antzone(); 
one.show();
two.show();

名稱形象，上面的程式碼可以批量建立物件。

但是比較死板，任何一個物件都有完全相同的屬性和方法，程式碼修改如下:

[JavaScript] 純文字檢視 複製程式碼
function Antzone(webName,age){ 
  var obj=new Object; 
  obj.webName=webName; 
  obj.age=age; 
  obj.show=function(){ 
    console.log(this.webName) 
  }; 
  return obj; 
} 
var one = Antzone("螞蟻部落",3); 
var two = Antzone("網易",10); 
one.show();
two.show();

二.建構函式方式:

[JavaScript] 純文字檢視 複製程式碼
function Antzone(webName,age){ 
  this.webName=webName; 
  this.age=age; 
  this.show=function(){ 
    console.log(this.webName) 
  }; 
} 
var one =new Antzone("螞蟻部落",3); 
var two =new Antzone("網易",10); 
one.show();
two.show();

更多內容可以參閱javascript建構函式一章節。

三.原型方式:

[JavaScript] 純文字檢視 複製程式碼
function Antzone(){ 
} 
Antzone.prototype.webName="螞蟻部落";
Antzone.prototype.age=3;
Antzone.prototype.show=function(){ 
  console.log(this.webName) 
};
 
var one =new Antzone(); 
var two =new Antzone(); 
one.show();
two.show();

更多關於prototype原型更多內容可以參閱javascript prototype原型一章節。

但是上面的方式有個問題，那就是新增的屬性是指向引用型別物件，看如下程式碼:

[JavaScript] 純文字檢視 複製程式碼
function Antzone(){ 
} 
Antzone.prototype.webName="螞蟻部落";
Antzone.prototype.age=3;
Antzone.prototype.arr=new Array(1,2);
Antzone.prototype.show=function(){ 
  console.log(this.arr) 
};
 
var one =new Antzone(); 
var two =new Antzone(); 
one.arr.push(3);
one.show();
two.show();

上面的程式碼中，修改第一個例項的陣列，那麼其他例項的陣列也會發生變化，因為arr屬性指向同一個陣列物件。

使用混合方式就可以解決此問題，也更加靈活科學，程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
function Antzone(webName,age){ 
  this.webName=webName;
  this.age=age;
  this.arr=new Array(1,2);
} 
Antzone.prototype.show=function(){ 
  console.log(this.arr) 
};
 
var one =new Antzone("螞蟻部落",3); 
var two =new Antzone("網易",10); 
one.arr.push(3);
one.show();
two.show();