JavaScript創(chuàng)建對象的四種常用模式實例分析
本文實例講述了JavaScript創(chuàng)建對象的四種常用模式。分享給大家供大家參考,具體如下:
這里介紹了javascript中創(chuàng)建對象常用的幾種模式,包括:工廠模式,構(gòu)造函數(shù)模式,原型模式,組合構(gòu)造函數(shù)與原型的模式,動態(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ù)中定義一個對象,并為其添加屬性與方法,最后將這個對象返回。雖然這種模式實現(xiàn)了方便的創(chuàng)建對象,但是有這樣一個問題,即不能判斷這個實例到底是誰創(chuàng)建的。
比如 son1 intanceof getMySon并不能返回 true。因為這里的實例確切來說并不是由getMySon 通過new來創(chuàng)建的,而是getMySon中的 o。
所以工廠模式并不適合需要創(chuàng)建很多種對象的情況。
那么怎么創(chuàng)建對象才能正確的判斷實例是從哪兒來的呢?下面就要說到構(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)用時要用 new。
在進行new調(diào)用時,進行如下幾個步驟:
1. 創(chuàng)建一個新的對象(并把空對象的__proto__屬性設置為getMySon.prototype)。
2. 將構(gòu)造函數(shù)的作用域賦給新對象(此時this 指向了這個新對象)。
3. 執(zhí)行構(gòu)造函數(shù)中的代碼(通過this 為這個新對象添加屬性)
4. 返回新對象。
通過這種方式產(chǎn)生的實例可以使用son1 instanceof getMySon來判斷實例是由誰來產(chǎn)生的。
那么使用構(gòu)造函數(shù)有什么問題呢?由于每次使用new時都會創(chuàng)建一個新的對象,那么所有的數(shù)據(jù)在不同實例之間是不共享的。但是對于函數(shù)sayName來說,它并沒有必要創(chuàng)建多個。這樣做浪費了空間。
這樣就引出了下一種,原型模式。
三. 原型模式
看如下代碼:
function getMySon(){}
getMySon.prototype.name = 'li ming';
getMySon.prototype.sex = 'female';
getMySon.prototype.sayName = function(){
alert(this.name);
}
這就是原型模式(原型的相關(guān)知識這里不詳細說)。
原型模式將屬性和方法添加到了getMySon.prototype里,prototype由所有的實例共享,它只有一份,并不是所有的實例各有一份。
這種方式實現(xiàn)了讓函數(shù)只有一份,不必占用多余的空間。但是,name,sex之類的屬性并不需要在所有實例間共享,而且使用原型模式進行傳參生成這些屬性也不方便。
那么可以合并構(gòu)造函數(shù)模式與原型模式,利用它們各自的優(yōu)點。讓各實例間不需要進行共享且需要通過傳參進行生成的屬性放在構(gòu)造函數(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)點。這是最常用的一種創(chuàng)建對象的模式。
四. 動態(tài)原型模式
所謂動態(tài)原型模式,其實是對 組合構(gòu)造函數(shù)與原型的模式 的一種封裝。
看如下代碼:
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');
這里之所以命名為動態(tài)原型模式,是因為getMySon在不同的調(diào)用中會發(fā)生變化,是動態(tài)的。只有在第一次調(diào)用getMySon時才會執(zhí)行對sayName函數(shù)的定義。
從本質(zhì)來看,仍然是將不需共享的通過構(gòu)造函數(shù)進行定義,需要共享的方法通過原型進行定義。只是將它們放在了一起,進行了封裝。
感興趣的朋友還可以使用本站在線HTML/CSS/JavaScript代碼運行工具:http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行結(jié)果。
更多關(guān)于JavaScript相關(guān)內(nèi)容還可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》
希望本文所述對大家JavaScript程序設計有所幫助。
相關(guān)文章
Js參數(shù)RSA加密傳輸之jsencrypt.js的使用
這篇文章主要介紹了Js參數(shù)RSA加密傳輸之jsencrypt.js的使用,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02
js控制href內(nèi)容的連接內(nèi)容的變化示例
這篇文章主要介紹了使用js控制href內(nèi)容的連接內(nèi)容的變化,需要的朋友可以參考下2014-04-04
JavaScript垃圾回收機制(引用計數(shù),標記清除,性能優(yōu)化)
這篇文章主要介紹了JavaScript垃圾回收機制(引用計數(shù),標記清除,性能優(yōu)化),垃圾回收是JavaScript的隱藏機制,我們通常無需為垃圾回收勞心費力,只需要專注功能的開發(fā)就好了2022-07-07
基于javascript實現(xiàn)漂亮的頁面過渡動畫效果附源碼下載
本文通過javascript實現(xiàn)漂亮的頁面過濾動畫效果,用戶通過點擊頁面左側(cè)的菜單,對應的頁面加載時伴隨著滑動過濾動畫,并帶有進度條效果。用戶體驗度非常好,感興趣的朋友一起看看吧2015-10-10

