JavaScript如何創建對象

這篇文章給大家分享的是有關JavaScript如何創建對象的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

這里介紹了javascript中創建對象常用的幾種模式，包括：工廠模式，構造函數模式，原型模式，組合構造函數與原型的模式，動態原型模式。

一.工廠模式

看如下代碼：

function getMySon(name,sex){
  var o={};
  o.name=name;
  o.sex=sex;
  o.sayName = function(){
    alert(this.name);
  }
  return o;
}
son1 = getMySon('li ming','male');
son2 = getMySon('li hong','female');

這就是工廠模式。在函數中定義一個對象，并為其添加屬性與方法，最后將這個對象返回。雖然這種模式實現了方便的創建對象，但是有這樣一個問題，即不能判斷這個實例到底是誰創建的。

比如 son1 intanceof getMySon并不能返回 true。因為這里的實例確切來說并不是由getMySon 通過new來創建的，而是getMySon中的 o。
所以工廠模式并不適合需要創建很多種對象的情況。

那么怎么創建對象才能正確的判斷實例是從哪兒來的呢？下面就要說到構造函數模式了。

二.構造函數模式

看如下代碼 :

function getMySon(name,sex){
  this.name = name;
  this.sex = sex;
  this.sayName = function(){
    alert(this.name);
  }
}
son1 = new getMySon('li ming','female');

這就是構造函數模式，注意在調用時要用 new。

在進行new調用時，進行如下幾個步驟：

1. 創建一個新的對象（并把空對象的__proto__屬性設置為getMySon.prototype)。

2. 將構造函數的作用域賦給新對象（此時this 指向了這個新對象）。

3. 執行構造函數中的代碼（通過this 為這個新對象添加屬性）

4. 返回新對象。

通過這種方式產生的實例可以使用son1 instanceof getMySon來判斷實例是由誰來產生的。

那么使用構造函數有什么問題呢？由于每次使用new時都會創建一個新的對象，那么所有的數據在不同實例之間是不共享的。但是對于函數sayName來說，它并沒有必要創建多個。這樣做浪費了空間。

這樣就引出了下一種，原型模式。

三. 原型模式

看如下代碼：

function getMySon(){}
getMySon.prototype.name = 'li ming';
getMySon.prototype.sex = 'female';
getMySon.prototype.sayName = function(){
  alert(this.name);
}

這就是原型模式（原型的相關知識這里不詳細說）。

原型模式將屬性和方法添加到了getMySon.prototype里，prototype由所有的實例共享，它只有一份，并不是所有的實例各有一份。

這種方式實現了讓函數只有一份，不必占用多余的空間。但是，name，sex之類的屬性并不需要在所有實例間共享，而且使用原型模式進行傳參生成這些屬性也不方便。

那么可以合并構造函數模式與原型模式，利用它們各自的優點。讓各實例間不需要進行共享且需要通過傳參進行生成的屬性放在構造函數模式中生成，讓各實例中需要共享的（比如方法）在原型模式中生成。

三. 組合構造函數與原型的模式

看如下代碼：

function getMySon(name,sex){
  this.name=name;
  this.sex=sex;
}
getMySon.prototype.sayName(){
  alert(this.name);
}
son1=new getMySon('li ming','female');

這是 組合構造函數與原型的模式 。這種方式結合了構造函數模式與原型模式的優點。這是最常用的一種創建對象的模式。

四. 動態原型模式

所謂動態原型模式，其實是對 組合構造函數與原型的模式 的一種封裝。
看如下代碼：

function getMySon(name,sex){
  this.name = name;
  this.sex = sex;
  //即使有多個需要定義的方法，也只需判斷一個方法。
  if(typeof sayName != 'function'){
    getMySon.prototype.sayName=function(){
      alert(this.name);
    }
  }
}
son1=new getMySon('li ming','female');

這里之所以命名為動態原型模式，是因為getMySon在不同的調用中會發生變化，是動態的。只有在第一次調用getMySon時才會執行對sayName函數的定義。

感謝各位的閱讀！關于“JavaScript如何創建對象”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！