1. 程式人生 > >js設計模式小結

js設計模式小結

重復 bsp his 一個 div 有變 str 引用 無法

1 構造函數模式

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

使用構造函數模式可以實現重復創建多個相似對象,且可以實現自定義傳參,但缺點是每次實例化一個對象時就相當於將該對象方法重新創建了一遍。

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

原型模式的優點在於,每次實例化一個對象時,不需要重新創建該對象方法,而是通過指針引用原型鏈的方法,缺點是不能自定義傳參,所以就有了下面的構造函數和原型組合使用的模式
3 構造函數+原型模式

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

綜合了構造函數和原型模式的雙方優點
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();

工廠模式也可以用於創建多個相似對象,與構造函數函數模式相似,主要區別是在內部通過new Object()創建對象最後return 出來,但是存在無法判斷對象類型的問題

5 模塊模式

var person = function(name){

function getName(name){
console.log(name);
}

return {
getName: getName
}
}();

person.getName(‘xiaoming‘);

特別是在單頁應用中常用的模式,可以理解為引入了私有變量特權方法的單例。

js設計模式小結