JS繼承、工廠構造及原型設計模式實例分析

這篇文章主要介紹“JS繼承、工廠構造及原型設計模式實例分析”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“JS繼承、工廠構造及原型設計模式實例分析”文章能幫助大家解決問題。

正文

正是由于：原型鏈繼承和構造函數繼承的 “毛病”

• 原型鏈繼承：所有繼承的屬性和方法都會在對象實例間共享，無法做到實例私有。

• 構造函數繼承：子類不能訪問父類原型上的方法。

組合繼承應運而生：

function SuperType(name){
     this.name = name;
     this.colors = ["red", "blue", "green"];
}
function SubType(name, age){
     SuperType.call(this, name) // 構造函數繼承 （兩次調用父類構造函數）
     this.age = age;
}
SuperType.prototype.sayName = function() {
     console.log(this.name);
}
SubType.prototype = new SuperType() // 原型鏈繼承 （一次調用父類構造函數）
SubType.prototype.sayAge = function() {
	 console.log(this.age);
}
let s1 = new SubType("Nicholas", 29)
let s2= new SubType("Greg", 27)
s1.colors.push("yellow")
console.log(s1.colors) // ['red', 'blue', 'green', 'yellow']
console.log(s2.colors) // ['red', 'blue', 'green']
s1.sayName() // Nicholas
s2.sayName() // Greg
s1.sayAge() // 29
s2.sayAge() // 27

但是呢？這樣做，會有效率問題，父類構造函數始終會被調用兩次：一次是在子類構造函數中調用，另一次在是創建子類原型時調用。

本質上，子類原型最終是要包含超類對象的所有實例屬性，子類構造函數只要在執行時重寫自己的原型就行了。

這個時候有一個新的思路！

不通過調用父類構造函數給子類原型賦值，而是取得父類原型的一個副本。使用寄生式繼承來繼承父 類原型，然后將返回的新對象賦值給子類原型。

核心代碼是：通過工廠的方式，增強一個新對象：

function createAnother(original){
     let clone = Object(original); // 通過調用函數創建一個新對象
     clone.sayHi = function() { // 以某種方式增強這個對象
         console.log("hi");
     };
     return clone; // 返回這個對象
}

將組合代碼改造一下，完整代碼是：

function inheritPrototype(subType, superType) {
     let prototype = Object(superType.prototype); // 創建對象
     prototype.constructor = subType; // 增強對象
     subType.prototype = prototype; // 賦值對象
}
function SuperType(name) {
     this.name = name;
     this.colors = ["red", "blue", "green"];
}
function SubType(name, age) {
     SuperType.call(this, name); // 構造函數繼承（只調了一次）
     this.age = age;
}
SuperType.prototype.sayName = function() {
     console.log(this.name);
};
inheritPrototype(SubType, SuperType); // 寄生繼承
SubType.prototype.sayAge = function() {
     console.log(this.age);
};
let s1 = new SubType("Nicholas", 29)
let s2= new SubType("Greg", 27)
s1.colors.push("yellow")
console.log(s1.colors) // ['red', 'blue', 'green', 'yellow']
console.log(s2.colors) // ['red', 'blue', 'green']
s1.sayName() // Nicholas
s2.sayName() // Greg
s1.sayAge() // 29
s2.sayAge() // 27

這里只調用了一次 SuperType 構造函數，避免了 SubType.prototype 上不必要也用不到的屬性；而且，原型鏈仍然保持不變，instanceof 操作符和 isPrototypeOf() 方法正常有效。

寄生式組合繼承可以算是【引用類型】繼承的最佳模式

os：不過這里的增強寫法，理解起來真是怪，為什么父類的顯示原型的構造函數等于子類？

SuperType.prototype.constructor=== SubType // true

大概是為了，通過寄生實現：父類、子類都由同一函數構造；

SubType === SubType.prototype.constructor // true
SuperType.prototype.constructor === SubType.prototype.constructor // true

關于“JS繼承、工廠構造及原型設計模式實例分析”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。