溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

通過說明與示例了解js五種設(shè)計(jì)模式

發(fā)布時(shí)間:2020-08-22 21:08:55 來源:腳本之家 閱讀:154 作者:全棧弄潮兒 欄目:web開發(fā)

第一種模式:js工廠模式

var lev=function(){ 
return "啊打"; 
}; 
function Parent(){ 
var Child = new Object(); 
Child.name="李小龍"; 
Child.age="30"; 
Child.lev=lev; 
return Child; 
}; 
var x = Parent(); 
alert(x.name); 
alert(x.lev());

說明:

1.在函數(shù)中定義對(duì)象,并定義對(duì)象的各種屬性,,雖然屬性可以為方法,但是建議將屬性為方法的屬性定義到函數(shù)之外,這樣可以避免重復(fù)創(chuàng)建該方法

2.引用該對(duì)象的時(shí)候,這里使用的是 var x = Parent()而不是 var x = new Parent();因?yàn)楹笳邥?huì)可能出現(xiàn)很多問題(前者也成為工廠經(jīng)典方式,后者稱之為混合工廠方式),不推薦使用new的方式使用該對(duì)象

3.在函數(shù)的最后返回該對(duì)象

4.不推薦使用這種方式創(chuàng)建對(duì)象,但應(yīng)該了解

第二種模式:js構(gòu)造函數(shù)模式

var lev=function(){ 
return "啊打"; 
}; 
function Parent(){ 
this.name="李小龍"; 
this.age="30"; 
this.lev=lev; 
}; 
var x =new Parent(); 
alert(x.name); 
alert(x.lev());

說明:

1.與工廠方式相比,使用構(gòu)造函數(shù)方式創(chuàng)建對(duì)象,無需再函數(shù)內(nèi)部重建創(chuàng)建對(duì)象,而使用this指代,并而函數(shù)無需明確return

2.同工廠模式一樣,雖然屬性的值可以為方法,扔建議將該方法定義在函數(shù)之外

3..同樣的,不推薦使用這種方式創(chuàng)建對(duì)象,但仍需要了解

第三種模式:js原型模式

var lev=function(){ 
return "啊打"; 
}; 
function Parent(){ }; 
Parent.prototype.name="李小龍"; 
Parent.prototype.age="30"; 
Parent.prototype.lev=lev; 
var x =new Parent(); 
alert(x.name); 
alert(x.lev());

說明:

1.函數(shù)中不對(duì)屬性進(jìn)行定義

2.利用prototype屬性對(duì)屬性進(jìn)行定義

3.同樣的,不推薦使用這樣方式創(chuàng)建對(duì)象

第四種模式:構(gòu)造函數(shù)+原型的js混合的模式(推薦)

function Parent(){ 
this.name="李小龍"; 
this.age=32; 
};
Parent.prototype.lev=function(){ 
return this.name; 
};
var x =new Parent();
alert(x.lev());

說明:

1.該模式是指混合搭配使用構(gòu)造函數(shù)方式和原型方式

2.將所有屬性不是方法的屬性定義在函數(shù)中(構(gòu)造函數(shù)方式)
將所有屬性值為方法的屬性利用prototype在函數(shù)之外定義(原型方式)

3.推薦使用這樣方式創(chuàng)建對(duì)象,這樣做有好處和為什么不單獨(dú)使用構(gòu)造函數(shù)方式和原型方式,由于篇幅問題這里不予討論

第五種模式:構(gòu)造函數(shù)+原型的動(dòng)態(tài)原型模式(推薦)

function Parent(){ 
this.name="李小龍"; 
this.age=32; 
if(typeof Parent._lev=="undefined"){ 
Parent.prototype.lev=function(){ 
return this.name; 
} 
Parent._lev=true; 
} 
}; 
var x =new Parent(); 
alert(x.lev());

說明:

1.動(dòng)態(tài)原型方式可以理解為混合構(gòu)造函數(shù),原型方式的一個(gè)特例

2.該模式中,屬性為方法的屬性直接在函數(shù)中進(jìn)行了定義,但是因?yàn)?br />

if(typeof Parent._lev=="undefined"){
Parent._lev=true;
}

從而保證創(chuàng)建該對(duì)象的實(shí)例時(shí),屬性的方法不會(huì)被重復(fù)創(chuàng)建

以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI