本文主要和大家帶來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); } }
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中文網其他相關文章！
