通過說明與示例了解js五種設(shè)計模式
第一種模式：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ù)中定義對象,并定義對象的各種屬性，,雖然屬性可以為方法，但是建議將屬性為方法的屬性定義到函數(shù)之外，這樣可以避免重復(fù)創(chuàng)建該方法
2.引用該對象的時候，這里使用的是 var x = Parent()而不是 var x = new Parent();因為后者會可能出現(xiàn)很多問題（前者也成為工廠經(jīng)典方式,后者稱之為混合工廠方式），不推薦使用new的方式使用該對象
3.在函數(shù)的最后返回該對象
4.不推薦使用這種方式創(chuàng)建對象，但應(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)建對象，無需再函數(shù)內(nèi)部重建創(chuàng)建對象，而使用this指代，并而函數(shù)無需明確return
2.同工廠模式一樣，雖然屬性的值可以為方法，扔建議將該方法定義在函數(shù)之外
3..同樣的，不推薦使用這種方式創(chuàng)建對象，但仍需要了解
第三種模式：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ù)中不對屬性進(jìn)行定義
2.利用prototype屬性對屬性進(jìn)行定義
3.同樣的，不推薦使用這樣方式創(chuàng)建對象
第四種模式：構(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)建對象,這樣做有好處和為什么不單獨使用構(gòu)造函數(shù)方式和原型方式，由于篇幅問題這里不予討論
第五種模式：構(gòu)造函數(shù)+原型的動態(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.動態(tài)原型方式可以理解為混合構(gòu)造函數(shù)，原型方式的一個特例
2.該模式中,屬性為方法的屬性直接在函數(shù)中進(jìn)行了定義，但是因為
if(typeof Parent._lev=="undefined"){
Parent._lev=true;
}
從而保證創(chuàng)建該對象的實例時，屬性的方法不會被重復(fù)創(chuàng)建
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
下面小編就為大家?guī)硪黄獪\談js原生拖放。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
JavaScript中的模塊化是指將每個js文件會被認(rèn)為單獨一個的模塊。模塊之間是互相不可見的。如果一個模塊需要使用另一個模塊，那么需要通過指定語法來引入要使用的模塊，而且只能使用引入模塊所暴露的內(nèi)容2022-11-11
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實現(xiàn)移動端無限加載分頁，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
JavaScript中將值轉(zhuǎn)換為字符串的五種方法總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于JavaScript中將值轉(zhuǎn)換為字符串的五種方法，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
這篇文章主要介紹了如何利用JavaScript實現(xiàn)一個簡單的投票demo，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)有一定參考價值，需要的可以參考一下2022-06-06
可選鏈操作符(?.)允許讀取位于鏈接對象鏈身處的屬性的值，本文就詳細(xì)的介紹一下，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要為大家詳細(xì)介紹了微信小程序下拉框組件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
深入探討JavaScript異步編程中Promise的關(guān)鍵要點
這篇文章將全面深入地探討Promise，包括其前身、歷史、能力、優(yōu)點、缺點以及提供每個方法的案例，感興趣的小伙伴可以跟隨小編一學(xué)習(xí)一下2023-06-06
JavaScript常用進(jìn)制轉(zhuǎn)換及位運算實例解析
這篇文章主要介紹了JavaScript常用進(jìn)制轉(zhuǎn)換及位運算實例解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-10-10
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)簡單購物車模塊，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04