JavaScript對象的創(chuàng)建模式與繼承模式示例講解

更新時間：2022年12月01日 08:51:42 作者：花鐺

繼承機制是面向對象程序設計使代碼可以復用的最重要的手段，它允許程序員在保持原有的特性基礎上進行擴展，增加功能，這樣產生新的類，稱作是派生類。繼承呈現(xiàn)了面向對象程序設計的層析結構，體現(xiàn)了由簡單到復雜的認知過程。繼承是類設計層次的復用

對象的創(chuàng)建模式

Object 構造函數(shù)模式：先創(chuàng)建空對象，再動態(tài)添加屬性和方法。

適用場景：初始時對象內部數(shù)據(jù)不確定。

存在問題：語句太多（這個問題可以通過使用對象字面量模式來解決）。

var person = new Object()
person.name = 'Tom' 
person.setName = function(name){
      this.name = name
}

使用對象字面量模式：使用 {} 創(chuàng)建對象，同時指定屬性和方法。

適用場景：初始時對象內部數(shù)據(jù)是確定的。

存在問題：如果創(chuàng)建多個對象，有很多重復代碼（這個問題可以通過使用工廠模式來解決）。

var person={
    name:'Tom', 
    setName: function (name){
          this.name = name
    }
}

工廠模式：通過工廠函數(shù)動態(tài)創(chuàng)建對象并返回。

適用場景：需要創(chuàng)建多個對象。

存在問題：對象沒有具體的類型（這個問題可以通過使用自定義構造函數(shù)模式來解決）。

function createPerson(name) {
	var obj = {
		name: name,
		setName: function (name) {
			this.name = name
		}
	}
	return obj 
}
var p1 = createPerson('Tom') 
var p2 = createPerson('Mary')

自定義構造函數(shù)模式：自定義構造函數(shù)，通過 new 創(chuàng)建對象。

適用場景：需要創(chuàng)建多個類型確定的對象。

存在問題：每個對象都有相同的數(shù)據(jù)（方法），浪費內存（這個問題可以通過使用構造函數(shù) + 原型的組合模式來解決）。

function Person(name) {
	this.name = name
	this.setName = function(name) {
		this.name = name
	}
}
var p1 = new Person('Tom')
var p2 = new Person('Mary')

構造函數(shù) + 原型的組合模式：自定義構造函數(shù)，屬性在函數(shù)中初始化，方法添加到原型上。

適用場景：需要創(chuàng)建多個類型確定的對象。

function Person(name) {
	this.name = name
}
Person.prototype.setName = function(name) {
	this.name = name
}
var p1 = new Person('Tom')
var p2 = new Person('Mary')

對象的繼承模式

原型鏈繼承：

變量查找作用域鏈；對象的屬性和方法查找原型鏈。

child.toString()

child.__proto__ = Child.prototype ----> Child.prototype = new Object() ----> {}.__proto__ = Object.prptotype child 能夠訪問到 toString 方法：是因為 child 實例能夠訪問到其原型對象上的方法；Child 構造函數(shù)的原型對象又指向 Object 構造函數(shù)的實例；{} 實例能夠訪問到其原型對象上的方法，因此順著原型鏈 child 能夠訪問到 Object 構造函數(shù)原型對象上的方法。

// 父類型
function Parent() {
	this.parentProp = 'parent prop'
}
Parent.prototype.showParent = function() {
	console.log(this.parentProp)
}
// 子類型
function Child() {
	this.childProp = 'child prop'
}
// 讓子類構造函數(shù)的 prototype 指向父類的實例對象，就可以形成子類 --- 父類的一條原型鏈，子類就可以訪問到父類原型上的屬性和方法。
Child.prototype = new Parent()
// 如果此時 console.log(child.constructor) 會打印輸出 Parent。
// 默認情況下，所有的原型對象都會自動獲得一個 constructor 屬性，指向原型對象所在的函數(shù)。因此 child 本身是沒有 constructor 屬性的，而是在它的原型對象身上；又因為它的原型對象指向了 Parent 的實例對象；Parent 實例對象的原型對象的 constructor 是 Parent，因此 child.constructor = Parent。這樣是錯誤的。
Child.prototype.constructor = Child
Child.prototype.showChild = function() {
	console.log(this.childProp)
}
var child = new Child()
child.showParent()

借用構造函數(shù)繼承：其實并沒有真的實現(xiàn)繼承，而是在子類構造函數(shù)中通過 call() 調用了父類的構造函數(shù)。

function Parent(name, age) {
	this.name = name
	this.age = age
}
function Child(name, age, price) {
	Parent.call(this, name, age) // 相當于執(zhí)行 this.Person(name, age)，也就是相當于 this.name = name; this.age = age
	this.price = price
}
const child = new Child('Tom', 20, 500)
console.log(child.name, child.age, child.price)

組合繼承：利用原型鏈繼承實現(xiàn)對父類型的方法的繼承；借用構造函數(shù)繼承初始化相同的屬性（真正在用的是這種方法）。

call() 是繼承屬性，重寫原型是繼承方法。

function Parent(name, age) {
	this.name = name
	this.age = age
}
Parent.prototype.setName = function(name) {
	this.name = name
}
function Child(name, age, price) {
    // 初始化相同的屬性
	Parent.call(this, name, age) 		
	this.price = price
}
// 繼承父類的原型對象上的方法
Child.prototype = new Parent()
// 修正 constructor 屬性
Child.prototype.constructor = Child
Parent.prototype.setPrice = function(price) {
	this.price = price
}
const child = new Child('Tom', 20, 500)
console.log(child.name, child.age, child.price)

到此這篇關于JavaScript對象的創(chuàng)建模式與繼承模式示例講解的文章就介紹到這了,更多相關JS對象創(chuàng)建模式與繼承模式內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: