亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JS繼承與工廠構(gòu)造及原型設(shè)計(jì)模式詳解

 更新時(shí)間:2022年07月08日 09:20:37   作者:掘金安東尼  
這篇文章主要為大家介紹了JS繼承與工廠構(gòu)造及原型設(shè)計(jì)模式詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

序言

我們?cè)谇耙黄恼?a href="http://chabaoo.cn/article/251607.htm" target="_blank">《JS精粹,原型鏈繼承和構(gòu)造函數(shù)繼承的 “毛病”》 ,提到了:原型鏈繼承、構(gòu)造函數(shù)繼承、組合繼承;

在另一篇文章《驀然回首,“工廠、構(gòu)造、原型”設(shè)計(jì)模式,正在燈火闌珊處》,提到了:我們用于創(chuàng)建對(duì)象的三種設(shè)計(jì)模式:工廠設(shè)計(jì)模式、構(gòu)造設(shè)計(jì)模式、原型設(shè)計(jì)模式;

至此,我們可以明顯的感受到:JS 要實(shí)現(xiàn)面向?qū)ο螅ɡ^承的能力),離不開(kāi)這 3 種設(shè)計(jì)模式;

原型鏈 + 構(gòu)造函數(shù) = 組合繼承

本篇帶來(lái)一個(gè)新的繼承方式:寄生繼承,它由工廠模式和構(gòu)造函數(shù)模式組成,即

工廠+構(gòu)造函數(shù) = 寄生繼承

正文

正是由于:原型鏈繼承和構(gòu)造函數(shù)繼承的 “毛病”

  • 原型鏈繼承:所有繼承的屬性和方法都會(huì)在對(duì)象實(shí)例間共享,無(wú)法做到實(shí)例私有。
  • 構(gòu)造函數(shù)繼承:子類(lèi)不能訪(fǎng)問(wèn)父類(lèi)原型上的方法。

組合繼承應(yīng)運(yùn)而生:

function SuperType(name){
     this.name = name;
     this.colors = ["red", "blue", "green"];
}
function SubType(name, age){
     SuperType.call(this, name) // 構(gòu)造函數(shù)繼承 (兩次調(diào)用父類(lèi)構(gòu)造函數(shù))
     this.age = age;
}
SuperType.prototype.sayName = function() {
     console.log(this.name);
}
SubType.prototype = new SuperType() // 原型鏈繼承 (一次調(diào)用父類(lèi)構(gòu)造函數(shù))
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

但是呢?這樣做,會(huì)有效率問(wèn)題,父類(lèi)構(gòu)造函數(shù)始終會(huì)被調(diào)用兩次:一次是在子類(lèi)構(gòu)造函數(shù)中調(diào)用,另一次在是創(chuàng)建子類(lèi)原型時(shí)調(diào)用。

本質(zhì)上,子類(lèi)原型最終是要包含超類(lèi)對(duì)象的所有實(shí)例屬性,子類(lèi)構(gòu)造函數(shù)只要在執(zhí)行時(shí)重寫(xiě)自己的原型就行了。

這個(gè)時(shí)候有一個(gè)新的思路!

不通過(guò)調(diào)用父類(lèi)構(gòu)造函數(shù)給子類(lèi)原型賦值,而是取得父類(lèi)原型的一個(gè)副本。使用寄生式繼承來(lái)繼承父 類(lèi)原型,然后將返回的新對(duì)象賦值給子類(lèi)原型。

核心代碼是:通過(guò)工廠的方式,增強(qiáng)一個(gè)新對(duì)象:

function createAnother(original){
     let clone = Object(original); // 通過(guò)調(diào)用函數(shù)創(chuàng)建一個(gè)新對(duì)象
     clone.sayHi = function() { // 以某種方式增強(qiáng)這個(gè)對(duì)象
         console.log("hi");
     };
     return clone; // 返回這個(gè)對(duì)象
}

將組合代碼改造一下,完整代碼是:

function inheritPrototype(subType, superType) {
     let prototype = Object(superType.prototype); // 創(chuàng)建對(duì)象
     prototype.constructor = subType; // 增強(qiáng)對(duì)象
     subType.prototype = prototype; // 賦值對(duì)象
}
function SuperType(name) {
     this.name = name;
     this.colors = ["red", "blue", "green"];
}
function SubType(name, age) {
     SuperType.call(this, name); // 構(gòu)造函數(shù)繼承(只調(diào)了一次)
     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

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

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

os:不過(guò)這里的增強(qiáng)寫(xiě)法,理解起來(lái)真是怪,為什么父類(lèi)的顯示原型的構(gòu)造函數(shù)等于子類(lèi)?

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

大概是為了,通過(guò)寄生實(shí)現(xiàn):父類(lèi)、子類(lèi)都由同一函數(shù)構(gòu)造;

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

結(jié)語(yǔ)

只要是寫(xiě) JS 的繼承,一定離不開(kāi):工廠、構(gòu)造、原型設(shè)計(jì)模式;

原型鏈 + 構(gòu)造函數(shù) = 組合繼承

工廠+構(gòu)造函數(shù) = 寄生繼承;

組合繼承和寄生繼承是最常用的兩種繼承方式。

......

u1s1,class 出來(lái)前,寫(xiě) JS 實(shí)現(xiàn)繼承,是真滴麻煩QAQ

以上就是JS繼承與工廠構(gòu)造及原型設(shè)計(jì)模式詳解的詳細(xì)內(nèi)容,更多關(guān)于JS繼承與設(shè)計(jì)模式的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

最新評(píng)論