5種js設計模式

本文主要和大家帶來5種js設計模式,需要的朋友可以參考下，希望能幫助大家。下面跟著小編一起來看看吧。

1. 工廠模式

這個是工廠模式工廠模式雖然解決了很多相似物件的問題但是沒有結局物件的辨識問題

function createPerson(name, age, job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
alert(this.name);
};
return o;
}
var person1 = createPerson("Nicholas", 29, "Software Engineer");
var person2 = createPerson("Greg", 27, "Doctor");

2.建構子模式

建構子模式每一實例中的sayName 是不同的所以有引進了原型鏈

function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = function(){
alert(this.name);
};
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");

hasOwnProperty() 方法可以偵測一個屬性是存在於實例中，還是存在於原型中。 true 為實例的false 為原型裡的

#3.原型模式

function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
person1.name = "Greg";
alert(person1.name); //"Greg"——来自实例
alert(person2.name); //"Nicholas"——来自原型
delete person1.name;
alert(person1.name); //"Nicholas" ——

person1 的name 被一個新值屏蔽了。但無論訪問person1.name 或訪問person2.name 都能夠正常地傳回值

function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
alert(person1.hasOwnProperty("name")); //false
alert("name" in person1); //true
person1.name = "Greg";
alert(person1.name); //"Greg" ——来自实例
alert(person1.hasOwnProperty("name")); //true
alert("name" in person1); //true
alert(person2.name); //"Nicholas" ——来自原型
alert(person2.hasOwnProperty("name")); //false
alert("name" in person2); //true
delete person1.name;
alert(person1.name); //"Nicholas" ——来自原型
alert(person1.hasOwnProperty("name")); //false
alert("name" in person1); //true

在上述程式碼執行的整個過程中， name 屬性要不是直接在物件上存取的，要么是透過原型訪問到
的。因此，呼叫 "name" in person1 總是會傳回 true ，無論該屬性存在於實例中或存在於原型中。
同時使用hasOwnProperty() 方法和in 運算符，就可以確定該屬性到底是存在於物件中，還是存在於
原型中，如下所示
name 屬性先是存在於原型中，因此hasPrototypeProperty() 回傳true 
該屬性就存在於實例中了，因此hasPrototypeProperty() 傳回false
原型模式如果寫成
##

Person.prototype = {
constructor: Person,
name : "Nicholas",
age : 29,
job : "Software Engineer",
friends : ["Shelby", "Court"],
sayName : function () {
alert(this.name);
}
}

上述格式一定要寫consructor 不然該函數constructor會指向window

var friend = new Person();
alert(friend instanceof Object); //true
alert(friend instanceof Person); //true
alert(friend.constructor == Person); //false
alert(friend.constructor == Object); //true

##4.組合使用建構子和原型的模式

function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.friends = ["Shelby", "Court"];
}
Person.prototype = {
constructor : Person,
sayName : function(){
alert(this.name);
}
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
person1.friends.push("Van");
alert(person1.friends); //"Shelby,Count,Van"
alert(person2.friends); //"Shelby,Count"
alert(person1.friends === person2.friends); //false
alert(person1.sayName === person2.sayName); //true

5.動態原型模式

function Person(name, age, job){
//属性
this.name = name;
this.age = age;
this.job = job
// 方法
if (typeof this.sayName != "function"){
Person.prototype.sayName = function(){
alert(this.name);
};
}
}
var friend = new Person("Nicholas", 29, "Software Engineer");
friend.sayName();

這段程式碼只會在第一次呼叫建構函式時才會執行。此後，原型已經完成初始化，不需要再做什麼修改了。不過要記住，這裡對原型所做的修改，能夠立即在所有實例中反映出來。

使用動態原型模式時，不能使用物件字面量重寫原型。前面已經解釋過了，如果在已經創建了實例的情況下重寫原型，那麼就會切斷現有實例與新原型之間的聯繫。

以上是5種js設計模式的詳細內容。更多資訊請關注PHP中文網其他相關文章！