本文實(shí)例講述了JavaScript創(chuàng)建對(duì)象的四種常用模式。分享給大家供大家參考，具體如下：

這里介紹了javascript中創(chuàng)建對(duì)象常用的幾種模式，包括：工廠模式，構(gòu)造函數(shù)模式，原型模式，組合構(gòu)造函數(shù)與原型的模式，動(dòng)態(tài)原型模式。

一.工廠模式

看如下代碼：

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');

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

比如 son1 intanceof getMySon并不能返回 true。因?yàn)檫@里的實(shí)例確切來說并不是由getMySon 通過new來創(chuàng)建的，而是getMySon中的 o。
所以工廠模式并不適合需要?jiǎng)?chuàng)建很多種對(duì)象的情況。

那么怎么創(chuàng)建對(duì)象才能正確的判斷實(shí)例是從哪兒來的呢？下面就要說到構(gòu)造函數(shù)模式了。

二.構(gòu)造函數(shù)模式

看如下代碼 :

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

這就是構(gòu)造函數(shù)模式，注意在調(diào)用時(shí)要用 new。

在進(jìn)行new調(diào)用時(shí)，進(jìn)行如下幾個(gè)步驟：

1. 創(chuàng)建一個(gè)新的對(duì)象（并把空對(duì)象的__proto__屬性設(shè)置為getMySon.prototype)。

2. 將構(gòu)造函數(shù)的作用域賦給新對(duì)象（此時(shí)this 指向了這個(gè)新對(duì)象）。

3. 執(zhí)行構(gòu)造函數(shù)中的代碼（通過this 為這個(gè)新對(duì)象添加屬性）

4. 返回新對(duì)象。

通過這種方式產(chǎn)生的實(shí)例可以使用son1 instanceof getMySon來判斷實(shí)例是由誰來產(chǎn)生的。

那么使用構(gòu)造函數(shù)有什么問題呢？由于每次使用new時(shí)都會(huì)創(chuàng)建一個(gè)新的對(duì)象，那么所有的數(shù)據(jù)在不同實(shí)例之間是不共享的。但是對(duì)于函數(shù)sayName來說，它并沒有必要?jiǎng)?chuàng)建多個(gè)。這樣做浪費(fèi)了空間。

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

三. 原型模式

看如下代碼：

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

這就是原型模式（原型的相關(guān)知識(shí)這里不詳細(xì)說）。

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

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

那么可以合并構(gòu)造函數(shù)模式與原型模式，利用它們各自的優(yōu)點(diǎn)。讓各實(shí)例間不需要進(jìn)行共享且需要通過傳參進(jìn)行生成的屬性放在構(gòu)造函數(shù)模式中生成，讓各實(shí)例中需要共享的（比如方法）在原型模式中生成。

三. 組合構(gòu)造函數(shù)與原型的模式

看如下代碼：

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

這是 組合構(gòu)造函數(shù)與原型的模式 。這種方式結(jié)合了構(gòu)造函數(shù)模式與原型模式的優(yōu)點(diǎn)。這是最常用的一種創(chuàng)建對(duì)象的模式。

四. 動(dòng)態(tài)原型模式

所謂動(dòng)態(tài)原型模式，其實(shí)是對(duì) 組合構(gòu)造函數(shù)與原型的模式 的一種封裝。
看如下代碼：

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

這里之所以命名為動(dòng)態(tài)原型模式，是因?yàn)間etMySon在不同的調(diào)用中會(huì)發(fā)生變化，是動(dòng)態(tài)的。只有在第一次調(diào)用getMySon時(shí)才會(huì)執(zhí)行對(duì)sayName函數(shù)的定義。
從本質(zhì)來看，仍然是將不需共享的通過構(gòu)造函數(shù)進(jìn)行定義，需要共享的方法通過原型進(jìn)行定義。只是將它們放在了一起，進(jìn)行了封裝。

感興趣的朋友還可以使用本站在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行結(jié)果。

更多關(guān)于JavaScript相關(guān)內(nèi)容還可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

最新評(píng)論