欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript設(shè)計(jì)模式之工廠模式示例講解

 更新時(shí)間:2014年03月04日 16:06:29   作者:  
這篇文章主要介紹了javascript設(shè)計(jì)模式中的工廠模式示例講解,需要的朋友可以參考下

javaScript工廠方式原始的方式

因?yàn)閷?duì)象的屬性可以在對(duì)象創(chuàng)建后動(dòng)態(tài)定義,這在 JavaScript 最初引入時(shí)都會(huì)編寫類似下面的代碼

復(fù)制代碼 代碼如下:

var oCar = new Object;
oCar.color = "blue";
oCar.doors = 4;
oCar.mpg = 25;
oCar.showColor = function() {
  alert(this.color);
};

在上面的代碼中,創(chuàng)建對(duì)象 car。然后給它設(shè)置幾個(gè)屬性:它的顏色是藍(lán)色,有四個(gè)門,每加侖油可以跑 25 英里。最后一個(gè)屬性實(shí)際上是指向函數(shù)的指針,意味著該屬性是個(gè)方法。執(zhí)行這段代碼后,就可以使用對(duì)象 car。不過(guò)這里有一個(gè)問(wèn)題,就是可能需要?jiǎng)?chuàng)建多個(gè) car 的實(shí)例,這顯然不是很好的方式。

解決方案:工廠方法
要解決該問(wèn)題,開發(fā)者創(chuàng)造了能創(chuàng)建并返回特定類型的對(duì)象的工廠函數(shù)。例如,函數(shù) createCar() 可用于封裝前面列出的創(chuàng)建 car 對(duì)象的操作:

復(fù)制代碼 代碼如下:

function createCar(sColor,iDoors,iMpg) {
  var oTempCar = new Object;
  oTempCar.color = sColor;
  oTempCar.doors = iDoors;
  oTempCar.mpg = iMpg;
  oTempCar.showColor = function() {
    alert(this.color);
  };
  return oTempCar;
}

var oCar1 = createCar("red",4,23);
var oCar2 = createCar("blue",3,25);

oCar1.showColor();        //輸出 "red"
oCar2.showColor();        //輸出 "blue"

調(diào)用此工廠函數(shù),將創(chuàng)建新對(duì)象,并賦予它所有必要的屬性,給 createCar() 函數(shù)加上參數(shù),即可為要?jiǎng)?chuàng)建的 car 對(duì)象的 color、doors 和 mpg 屬性賦值。這使兩個(gè)對(duì)象具有相同的屬性,卻有不同的屬性值。該方法有個(gè)不好的地方在于每創(chuàng)建一個(gè)car對(duì)象(即調(diào)用一次createCar函數(shù))都會(huì)重復(fù)的為每個(gè)對(duì)象創(chuàng)建showColor 方法,而這時(shí)沒有必要的而事實(shí)上,每個(gè)對(duì)象都共享同一個(gè)函數(shù)。于是我們嘗試在函數(shù)之外去聲明其方法屬性。

在工廠函數(shù)外定義對(duì)象的方法
有些開發(fā)者在工廠函數(shù)外定義對(duì)象的方法,然后通過(guò)屬性指向該方法,從而避免這個(gè)問(wèn)題:

復(fù)制代碼 代碼如下:

function showColor() {
  alert(this.color);
}

function createCar(sColor,iDoors,iMpg) {
  var oTempCar = new Object;
  oTempCar.color = sColor;
  oTempCar.doors = iDoors;
  oTempCar.mpg = iMpg;
  oTempCar.showColor = showColor;
  return oTempCar;
}

var oCar1 = createCar("red",4,23);
var oCar2 = createCar("blue",3,25);

oCar1.showColor();        //輸出 "red"
oCar2.showColor();        //輸出 "blue"

在上面這段重寫的代碼中,在函數(shù) createCar() 之前定義了函數(shù) showColor()。在 createCar() 內(nèi)部,賦予對(duì)象一個(gè)指向已經(jīng)存在的 showColor() 函數(shù)的指針。從功能上講,這樣解決了重復(fù)創(chuàng)建函數(shù)對(duì)象的問(wèn)題;但是從語(yǔ)義上講,該函數(shù)不太像是對(duì)象的方法。

相關(guān)文章

  • 在Javascript中 聲明時(shí)用"var"與不用"var"的區(qū)別

    在Javascript中 聲明時(shí)用"var"與不用"var"的區(qū)別

    Javascript聲明變量的時(shí)候,雖然用var關(guān)鍵字聲明和不用關(guān)鍵字聲明,很多時(shí)候運(yùn)行并沒有問(wèn)題,但是這兩種方式還是有區(qū)別的
    2013-04-04
  • js中值類型和引用類型的區(qū)別介紹

    js中值類型和引用類型的區(qū)別介紹

    這篇文章介紹了js中值類型和引用類型的區(qū)別,文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-06-06
  • 如何讓頁(yè)面在打開時(shí)自動(dòng)刷新一次讓圖片全部顯示

    如何讓頁(yè)面在打開時(shí)自動(dòng)刷新一次讓圖片全部顯示

    我的網(wǎng)頁(yè)的圖片較多,而服務(wù)器也不是很好,所以每次打開網(wǎng)頁(yè)后總有一、兩幅圖片無(wú)法顯示,但刷新一遍后又全部可顯示了,這種問(wèn)題相信每個(gè)人都遇到過(guò),接下來(lái)介紹詳細(xì)解決方法
    2012-12-12
  • 總結(jié)JavaScript三種數(shù)據(jù)存儲(chǔ)方式之間的區(qū)別

    總結(jié)JavaScript三種數(shù)據(jù)存儲(chǔ)方式之間的區(qū)別

    這篇文章主要介紹了JavaScript三種數(shù)據(jù)存儲(chǔ)方式之間的區(qū)別,指的分別是sessionStorage和localStorage以及cookie三種瀏覽器端的數(shù)據(jù)存儲(chǔ)方式,需要的朋友可以參考下
    2016-05-05
  • Javascript入門學(xué)習(xí)第一篇 js基礎(chǔ)

    Javascript入門學(xué)習(xí)第一篇 js基礎(chǔ)

    這是我看了DOM編程藝術(shù),悟透JavaScript,javascript權(quán)威指南5做的筆記,我資質(zhì)不深,不能寫出高深的文章, 如果你覺得筆記寫得不好,可以不看我以后的。這篇文章就當(dāng)作浪費(fèi)你幾分鐘。
    2008-07-07
  • javascript標(biāo)簽在頁(yè)面中的位置探討

    javascript標(biāo)簽在頁(yè)面中的位置探討

    在制作網(wǎng)頁(yè)的過(guò)程中需要引用很多的js文件,至于他正確位置好多的朋友就會(huì)有疑問(wèn)了,接下來(lái)為大家詳細(xì)介紹下
    2013-04-04
  • HTML form表單提交方法案例詳解

    HTML form表單提交方法案例詳解

    這篇文章主要介紹了HTML form表單提交方法案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
    2021-08-08
  • js css后面所帶參數(shù)含義介紹

    js css后面所帶參數(shù)含義介紹

    網(wǎng)頁(yè)鏈接的js css后面總是帶有一些參數(shù),想必大家并不陌生,下面為大家介紹下這些參數(shù)的含義,感興趣的朋友可以參考下
    2013-08-08
  • 現(xiàn)如今最流行的JavaScript代碼規(guī)范

    現(xiàn)如今最流行的JavaScript代碼規(guī)范

    流行的雖然不一定是好的,但是從交流的角度來(lái)說(shuō),按照流行的風(fēng)格編寫代碼,可以讓你的代碼在大多數(shù)人看起來(lái)更習(xí)慣
    2014-03-03
  • JavaScript學(xué)習(xí)筆記整理_關(guān)于表達(dá)式和語(yǔ)句

    JavaScript學(xué)習(xí)筆記整理_關(guān)于表達(dá)式和語(yǔ)句

    下面小編就為大家?guī)?lái)一篇JavaScript學(xué)習(xí)筆記整理_關(guān)于表達(dá)式和語(yǔ)句。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-09-09

最新評(píng)論