常用設(shè)計模式總結(jié)

1 構(gòu)造函數(shù)模式
var Person = function(name){
    this.name = name;
    this.getName = function(){
        console.log(this.name);
    }
};

var Person1= new Person('xiaoming');
Person1.getName();
var Person2 = new Person('xiaohua');
Person2.getName();

使用構(gòu)造函數(shù)模式可以實現(xiàn)重復(fù)創(chuàng)建多個相似對象,且可以實現(xiàn)自定義傳參,但缺點是每次實例化一個對象時就相當(dāng)于將該對象方法重新創(chuàng)建了一遍。

2 原型模式
var Person = function(){
};
Person.prototype.name = 'xiaoming';
Person.prototype.getName = function() {
    console.log(this.name);
};

var Person1 = new Person();
Person1.getName();
var Person2 = new Person();
Person2.getName();

原型模式的優(yōu)點在于,每次實例化一個對象時,不需要重新創(chuàng)建該對象方法,而是通過指針引用原型鏈的方法,缺點是不能自定義傳參,所以就有了下面的構(gòu)造函數(shù)和原型組合使用的模式

3 構(gòu)造函數(shù)+原型模式
var Person = function(name){
     this.name = name;
};

Person.prototype.getName = function() {
    console.log(this.name);
};

var Person1 = new Person('xiaoming');
Person1.getName();
var Person2 = new Person('xiaohua');
Person2.getName();

綜合了構(gòu)造函數(shù)和原型模式的雙方優(yōu)點

4 工廠模式
function createPerson(name){
    var Person = new Object();
    Person.name  = name;
    Person.getName = function(){
        console.log(this.name);
    } 
    return Person;
}

var Person1= createPerson('xiaoming');
Person1.getName();
var Person2= createPerson('xiaohua');
Person2.getName();

工廠模式也可以用于創(chuàng)建多個相似對象,與構(gòu)造函數(shù)函數(shù)模式相似,主要區(qū)別是在內(nèi)部通過new Object()創(chuàng)建對象最后return 出來,但是存在無法判斷對象類型的問題

5 模塊模式
var person = function(name){
    
     function getName(name){
         console.log(name);
     }
     
    return {
        getName: getName
    }
}();

person.getName('xiaoming');

特別是在單頁應(yīng)用中常用的模式,可以理解為引入了私有變量特權(quán)方法的單例。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容