快捷導(dǎo)航

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

更新時(shí)間：2019年06月17日 14:15:39 作者：全棧弄潮兒

這篇文章主要介紹了通過(guò)說(shuō)明與示例了解js五種設(shè)計(jì)模式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下

第一種模式：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());

說(shuō)明：

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

2.引用該對(duì)象的時(shí)候，這里使用的是 var x = Parent()而不是 var x = new Parent();因?yàn)楹笳邥?huì)可能出現(xiàn)很多問(wè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());

說(shuō)明：

1.與工廠方式相比，使用構(gòu)造函數(shù)方式創(chuàng)建對(duì)象，無(wú)需再函數(shù)內(nèi)部重建創(chuàng)建對(duì)象，而使用this指代，并而函數(shù)無(wú)需明確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());

說(shuō)明：

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

說(shuō)明：

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

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

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

第五種模式：構(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());

說(shuō)明：

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)建

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

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

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

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具