JavaScript之物件建立模式

2021-09-24 17:40:11 字數 4763 閱讀 5149

工廠模式

建立多個單體物件的時候會產生大量重複的**發明一種介面函式

function createperson(name, age, job ) 

return o

}var person1 = createperson("pxj", 18, "ps")

person1.sayname() // pxj

var person2 = createperson("xwh", 19, "tesxt")

person2.sayname() // xwh

建構函式模式

建立多個單體物件的時候會產生大量重複的**發明一種介面函式

function person(name, age, job ) 

}// 以上寫法當建立多個物件的時候都會呼叫一下sayname,同時做了相同的一件事,修改如下

function person(name, age, job )

// 將sayname設定為全域性變數,但是尷尬的是只能被某個物件呼叫,而且如果多個方法的時候還要建立多個全域性方法,不推薦啊

function sayname ()

var person1 = new person("pxj", 18, "ps")

var person2 = new person("xwh", 19, "test")

// 使用constructor 來識別是否是物件

console.log(person1.constructor === person, person2.constructor === person) // true true

// 使用instanceof 來檢測是否是物件(推薦)

console.log(person1 instanceof object) //true

和工廠模式不相同之處

1、沒有顯示建立物件

2、直接將屬性和方法賦給了this物件

3、沒有return語句

使用建構函式建立物件,必須使用new操作符, 建立時會經歷四個步驟

1、建立乙個物件

2、將建構函式的作用域賦給新物件(this指向這個新物件)

3、指向建構函式中的**(為新物件新增方法)

4、返回新物件

建構函式模式的缺點

每個方法都要在每個例項上重新建立一遍

原型模式

完美解決了物件同時做一件事,並且設定為全域性函式還只能自己物件呼叫的尷尬,每建立乙個函式都有乙個prototype(原型)屬性,這個屬性是乙個指標,指向乙個物件,而這個物件的用途是包含可以由特定型別的所以例項共享的屬性和方法,使用原型物件的好處是可以讓所有物件例項共享他所包含的屬性和方法

function person() 

person.prototype.name = "phj"

person.prototype.age = 19

person.prototype.sayname = function ()

var person1 = new person()

person1.sayname() // phj

var person2 = new person()

person2.sayname() // phj

console.log(person1.sayname() == person2.sayname()) // true

console.log(person2)

// 當為物件新增乙個屬性時,這個屬性就會遮蔽原型物件上儲存的屬性,換句話說,新增2這個屬性只會阻礙我們訪問原型中的那個屬性,但不會修改那個屬性的

// 可以使用delete操作符來完全刪除例項屬性

// 不能重寫原型中的值,但是建立的屬性會遮蔽原型原先的值(同名的情況下)

// 例項上的屬性方法和原型同級,優先查詢例項上的屬性和方法,如果找不到,則會往原型上找

person1.name = "ljs"

// 例項上已經建立了name屬性了,就不在需要搜尋原型了

person1.sayname() // ljs --- 來自例項

person2.sayname() // phj --- 來自原型

// 刪除例項上的屬性

delete person1.name

console.log(person1.name) // phj 之前新增已被刪除、

// 使用hasownproperty()方法可以檢測乙個屬性是存在例項中還是原型中(方法是從object繼承下來的)

person1.name = "ljs"

console.log(person1.hasownproperty("name")) // true(存在例項中)

delete person1.name // 刪除其實例上的屬性

console.log(person1.hasownproperty("name")) // false(存在原型中)

// sort() 按照數值大小進行排序

var arry = [5,1,3,4]

console.log(arry.sort()) // 1, 3, 4, 5

// 在字串原型上新增方法,所有字串都可用(不推薦)

string.prototype.startswith = function (text)

var s = "hello world!"

console.log(s.startswith("hello"))

原型模式的弊端:修改原型上的乙個方法會影響另外乙個

// function persons() 

// persons.prototype =

// }

// var persons1 = new persons()

// persons1.friends.push("lht") // "ljs", "xwh", "lht"

// console.log(persons1.friends)

// var persons2 = new persons()

// // 並無修改persons2上的friends屬性

// console.log(persons2.friends) // "ljs", "xwh", "lht"

// console.log(persons1.friends === persons2.friends) // true

總結:建構函式用於定義例項屬性,而原型模式用於定義方法和共享屬性,設計模式之建構函式模式和原型模式混合體,完美解決了修改原型上的方法會影響另乙個

// 構造模式定義法

function person(name, age, job)

// 原型模式定義法

person.prototype =

}// 結合使用

var person1 = new person('pyj', 18, "checker")

var person2 = new person('xwh', 18, 'danker')

person1.friend.push('gui');

console.log(person1.friend, person2.friend)// 已在friend陣列中新增了gui,然而person2卻還是之前沒改的

console.log(person1.friend === person2.friend) // false

console.log(person1.sayname === person2.sayname) // true

動態原型模式

他把所有資訊都封裝在建構函式中,而通過在夠著函式中初始化原型,又保持了同時使用建構函式和原型的優點

function person(name, age, job) ;}}

var friend = new person('jx', 19, 'software');

friend.sayname() // jx

寄生建構函式模式

可以在建立額外方法下使用

1.返回的物件與建構函式或者建構函式的原型屬性之間沒有關係,

2.不能依賴instanceof來判斷型別

建議:可以使用其他模式就不要用這個模式了

function specialarray() 

return values

}var colors = new specialarray('red', 'blue', 'green');

console.log(colors.topipedstring());// red/ blue/ green

6.穩妥建構函式模式

該方法與寄生設計模式類似,但有兩點不同

1.新建立物件的例項方法不引用this

2.是不使用new操作符呼叫建構函式

function person(name, age, job) ;

return o;

}// 除了使用sayname()方法外,沒有其他辦法訪問name的值

var friend = person('ox', 19, 'sada');

friend.sayname(); // ox

JavaScript建立物件

一 建立單個物件 方式一 object建構函式 var o new object o.key value 方式二 物件字面量 方式一和二缺點 使用相同的介面建立很多物件會產生大量重複 使用方式三解決 方式三 工廠模式 使用函式封裝以特定介面建立物件的細節 function createobject ...

JavaScript 建立物件

工廠模式抽象了建立具體物件的過程,能夠快速建立大量具有相似屬性及方法的物件。function createperson name,age,job obj.name name obj.age age obj.job job obj.sayname function return obj var per...

JavaScript 建立物件

function person var person new person 複製 使用關鍵字new建立新例項物件經過了以下幾步 1 建立乙個新物件,如 var person 2 新物件的 proto 屬性指向建構函式的原型物件。3 將建構函式的作用域賦值給新物件。也所以this物件指向新物件 4 執...