JavaScript-原型模式創建對象

原型模式

原型與原型鏈

我們創建的每個函數都有一個prototype屬性,即原型屬性。prototype屬性是一個指針,指向一個包含可以由特定類型的所有實例共享的屬性和方法的對象。
prototype就是通過調用構造函數而創建的那個對象實例的原型對象,使用原型對象的好處是可以讓所有對象實例共享包含的屬性和方法。

什麼叫讓所有對象實例共享包含的屬性和方法
直接在對象實例上定義方法的缺點是,不同對象實例中包含的方法不是同一個Function實例——在ECMAScript中的函數是對象,每定義一個函數,就是實例化一個對象。以這種方式創建函數,會導致不同的作用域鏈和標識符解析。
而使用原型對象則可以做到讓所有對象實例共享包含的屬性和方法。

function Person() {}
Person.prototype={
    name :  'defaultName',
    age = 'defaultAge'
}
Person.prototype.sayName = function () {
  console.log(this.name)
}

var person1 = new Person()
var person2 = new Person()

//使用原型對象的好處,可以讓所有對象實例共享它所包含的屬性和方法
console.log(person1.sayName == person2.sayName) // true

原型鏈
原型鏈圖片
有關方法
ObjectName.prototype.isPrototypeOf(instanceName)
實例instanceName的原型是否是ObjectName.prototype。
Object.getPrototypeOf(instanceName)
獲取實例instanceName的原型的名稱。

var person = new Person()
console.log(Person.prototype.isPrototypeOf(person))		// true
console.log(Object.getPrototypeOf(person) == Person.prototype)			//true

原型的動態性

對原型對象的修改會及時體現在實例上,就算在實例創建以後。

var person1 = new Person()
Person.prototype.sayHi = function () {
  console.log('sayHi')
}
person1.sayHi()		// sayHi

但是,如果重寫整個原型對象,情況則會不一樣。

var person2 = new Person()
Person.prototype = {
  sayName: function () {
    console.log('sayName')
  },
}
 person2.sayName()	// person2.sayName is not a function

原因如下圖,初始化person2時與原來的Person.prototype有聯繫,重寫了Person.prototype之後相當於新new了一個出來,與原來那個已經不是同一個了。

在這裏插入圖片描述
在此之後,如果再新建對象實例,則會與新new的prototype建立聯繫,會擁有新prototype上面的屬性,但不會擁有原prototype上的屬性。

var person3 = new Person()
console.log(person3.name)	// undefined
person3.sayName()		// sayName

在這裏插入圖片描述

原型模式的缺點

本質是原型中的所有屬性被很多實例共享的問題。對於是基本類型值的屬性不要緊,但是對於引用類型屬性,更改一個實例上的該屬性值,會導致所有實例中的該屬性值都被更改——因爲改引用類型值是存在於對象原型Prototype上的,而不是對象實例中。

function Person() {}
Person.prototype = {
  arrays: ['1', '2'],
}
var person1 = new Person()
var person2 = new Person()
person1.arrays.push('3')

console.log(person1.arrays)		// [ '1', '2', '3' ]
console.log(person2.arrays)		// [ '1', '2', '3' ]

因此,很少單獨使用原型模式。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章