首頁 > web前端 > js教程 > 5種js設計模式

5種js設計模式

零到壹度
發布: 2018-03-21 16:59:11
原創
2947 人瀏覽過

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

1. 工廠模式

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

1

2

3

4

5

6

7

8

9

10

11

12

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 是不同的所以有引進了原型鏈

1

2

3

4

5

6

7

8

9

10

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.原型模式

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

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 都能夠正常地傳回值

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

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
原型模式如果寫成
##

1

2

3

4

5

6

7

8

9

10

Person.prototype = {

constructor: Person,

name : "Nicholas",

age : 29,

job : "Software Engineer",

friends : ["Shelby", "Court"],

sayName : function () {

alert(this.name);

}

}

登入後複製

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


1

2

3

4

5

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.組合使用建構子和原型的模式

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

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.動態原型模式

1

2

3

4

5

6

7

8

9

10

11

12

13

14

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中文網其他相關文章!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板