JavaScript繼承模式

DrizzleX 發(fā)布于2019-08-20 19:05 / 3001人閱讀

摘要：組合繼承組合繼承有時(shí)也叫偽經(jīng)典繼承，該繼承模式將原型鏈和借用構(gòu)造函數(shù)的技術(shù)結(jié)合在一起實(shí)現(xiàn)。寄生組合式繼承通過借用構(gòu)造函數(shù)來繼承屬性，通過原型鏈的混成形式來繼承方法。

原文地址：JavaScript實(shí)現(xiàn)繼承

眾所周知，JavaScript 這門語言在 ES6 出來之前是沒有類（class）這一概念的，所以 JavaScript 中的類都是通過原型鏈來實(shí)現(xiàn)的。同樣，使用 JavaScript 也能實(shí)現(xiàn)面向?qū)ο蟮膶?shí)現(xiàn)繼承。以下是《高程》（第三版）的讀書筆記。

原型鏈

通過原型鏈實(shí)現(xiàn)繼承很容易理解，也很簡(jiǎn)單。將子類的原型指向父類的實(shí)例即可。寫個(gè)簡(jiǎn)單的例子：

// 父類
function SuperType() {
    this.property = "super";
}
// 在父類的原型上定義方法
SuperType.prototype.getSuperVal = function () {
    console.log(this.property);
};

// 子類
function SubType() {
    this.property = "sub";
}
// 子類繼承父類
SubType.prototype = new SuperType();

var instance = new SubType();
console.log(instance.getSuperVal()); // "sub"

對(duì)于子類來講，其原型的指向應(yīng)該是這樣的：SubType -> new SuperType() -> SuperType.prototype -> Object.prototype -> null。

注意：

如果想要給子類添加原型上的方法，需要在子類繼承了父類后添加，否則會(huì)被父類實(shí)例所覆蓋。

也不要用對(duì)象字面量的方式給子類原型添加新方法，這會(huì)使得之前的繼承失效。

原型鏈的問題：

父類的實(shí)例屬性成為了子類的原型屬性，即子類的實(shí)例共享了該父類實(shí)例的屬性，如果該屬性是引用類型，則子類的實(shí)例對(duì)該屬性的修改會(huì)反映在所有的子類實(shí)例上。

在創(chuàng)建子類實(shí)例時(shí)，不能向父類的構(gòu)造函數(shù)傳遞參數(shù)。實(shí)際上，應(yīng)該說是沒有辦法在不影響所有對(duì)象實(shí)例的情況下，給父類的構(gòu)造函數(shù)傳遞參數(shù)。

借用構(gòu)造函數(shù)

這個(gè)方法是為了解決原型鏈方式帶來的問題，使用十分巧妙，利用了 call 方法。代碼實(shí)現(xiàn)：

// 父類
function SuperType() {
    this.users = ["Jack", "Tom"];
}
// 子類
function SubType() {
    // 繼承
    SuperType.call(this);
}

var instance1 = new SubType();
var instance2 = new SubType();

instance1.users.pop(); // "Tom"
console.log(instance2.users); // ["Jack", "Tom"]

通過借用構(gòu)造函數(shù)解決了共享原型屬性導(dǎo)致的問題。同時(shí)也可以通過 call 方法給父類傳遞參數(shù)。

借用構(gòu)造函數(shù)的問題：

方法都需要在構(gòu)造函數(shù)（父類或子類）中定義，無法達(dá)到函數(shù)復(fù)用的功能。

組合繼承

組合繼承有時(shí)也叫偽經(jīng)典繼承，該繼承模式將原型鏈和借用構(gòu)造函數(shù)的技術(shù)結(jié)合在一起實(shí)現(xiàn)。示例代碼：

// 父類
function SuperType(company) {
    this.company = company;
    this.staffs = ["Jack", "Tom"];
}
// 父類方法
SuperType.prototype.getCompany = function () {
    console.log(this.company);
};

// 子類
function SubType(company, product) {
    // 繼承屬性
    SuperType.call(this, company);

    this.product = product;
}
// 繼承方法
SubType.prototype = new SuperType();
// 指向正確的constructor
SubType.prototype.constructor = SubType;
SubType.prototype.getProduct = function () {
    console.log(this.product);
};

// SubType實(shí)例
var instance1 = new SubType("A", "tellphone");
instance1.getCompany(); // "A"
instance1.getProduct(); // "tellphone"
instance1.staffs.push("Amy"); // ["Jack", "Tom", "Amy"]

var instance2 = new SubType("B", "toy");
instance2.getCompany(); // "B"
instance2.getProduct(); // "toy"
console.log(instance2.staffs); // ["Jack", "Tom"]

從代碼的例子可以觀察到，組合繼承模式可以讓子類的多個(gè)實(shí)例既能擁有自己的屬性，又能使用相同的方法，融合了原型鏈和借用構(gòu)造函數(shù)的優(yōu)點(diǎn)。

原型式繼承

原型式繼承是借助原型可以基于已有的對(duì)象創(chuàng)建新對(duì)象，同時(shí)還不必因此創(chuàng)建自定義類型。使用如下函數(shù)實(shí)現(xiàn)：

function object(obj) {
    function F() {}
    F.prototype = obj;
    return new F();
}

object 函數(shù)對(duì)傳入的對(duì)象實(shí)現(xiàn)了淺復(fù)制。所以對(duì)所有由其創(chuàng)建的實(shí)例都共享了 obj 對(duì)象中的引用屬性。

寄生式繼承

寄生式繼承模式和原型式繼承模式很相似，創(chuàng)建了一個(gè)僅用于封裝繼承過程的函數(shù)，在函數(shù)內(nèi)部增強(qiáng)對(duì)象的功能：

function createAnother(obj) {
    var clone = object(obj);
    clone.saySomething = function () {
        alert("Hello world!");
    };

    return clone;
}

function object(obj) {
    function F() {}
    F.prototype = obj;
    return new F();
}

通過 createAnother 函數(shù)，對(duì)對(duì)象的功能進(jìn)行增強(qiáng)，然而這種方式也沒有達(dá)到函數(shù)復(fù)用的效果，這一點(diǎn)和構(gòu)造函數(shù)模式一樣。

寄生組合式繼承

通過借用構(gòu)造函數(shù)來繼承屬性，通過原型鏈的混成形式來繼承方法。寄生組合模式使用寄生模式來實(shí)現(xiàn)對(duì)父類原型的繼承，再將結(jié)果指定給子類的原型。其基本模式如下：

function inheritPrototype(subType, superType) {
    // 返回父類原型副本并賦值給子類原型
    subType.prototype = object(superType.prototype);
    subType.prototype.constructor = subType;
}

再來看一個(gè)例子：

// 父類
function SuperType(name) {
    this.name = name;
}
// 在父類的原型上定義方法
SuperType.prototype.getName = function () {
    console.log(this.name);
};

// 子類
function SubType(name, age) {
    SuperType.call(this, name);

    this.age = age;
}

// 寄生組合繼承
inheritPrototype(SubType, SuperType);

// 添加子類方法
SubType.prototype.getAge = function () {
    console.log(this.age);
};

和組合繼承模式相比，寄生組合式繼承模式只調(diào)用了一次 SuperType 構(gòu)造函數(shù)，也避免了在 SubType.prototype 上創(chuàng)建多余的屬性。開發(fā)人員普遍認(rèn)為寄生組合式繼承是引用類型最理想的繼承范式。

參考書籍

《JavaScript高級(jí)程序設(shè)計(jì)》（第三版）

云服務(wù)器 GPU云服務(wù)器 js繼承模式 javascript繼承 javascript繼承方法 Javascript實(shí)現(xiàn)繼承

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/85114.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

DrizzleX

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow

閱讀 2042·2023-04-26 01:33
pytorch

閱讀 1669·2023-04-26 00:52
#黑五#A400互聯(lián)：全場(chǎng)VPS月付七折，洛杉磯1核1G年付118元，三網(wǎng)聯(lián)通9929線路

閱讀 1052·2021-11-18 13:14
站長(zhǎng)必備的6款免費(fèi)FTP服務(wù)器連接軟件（你在使用哪款FTP軟件）

閱讀 5466·2021-09-26 10:18
數(shù)據(jù)庫主機(jī)地址是什么-數(shù)據(jù)庫那個(gè)是主機(jī)？

閱讀 2919·2021-09-22 15:52
瀏覽器的工作原理整理

閱讀 1498·2019-08-29 17:15
css布局簡(jiǎn)史與決勝未來的第四代css布局技術(shù)

閱讀 3028·2019-08-29 16:11
前端那些典型布局方案

閱讀 1046·2019-08-29 16:11

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

JavaScript繼承模式

相關(guān)文章

**理解JavaScript的核心知識(shí)點(diǎn)：原型**

[譯] 為什么原型繼承很重要

JavaScript代碼復(fù)用模式

javaScript面向?qū)ο缶幊?繼承（一）

JavaScript設(shè)計(jì)模式-抽象工廠模式

發(fā)表評(píng)論

0條評(píng)論

DrizzleX

男|高級(jí)講師

TA的文章

tensorflow

pytorch

#黑五#A400互聯(lián)：全場(chǎng)VPS月付七折，洛杉磯1核1G年付118元，三網(wǎng)聯(lián)通9929線路

站長(zhǎng)必備的6款免費(fèi)FTP服務(wù)器連接軟件（你在使用哪款FTP軟件）

數(shù)據(jù)庫主機(jī)地址是什么-數(shù)據(jù)庫那個(gè)是主機(jī)？

瀏覽器的工作原理整理

css布局簡(jiǎn)史與決勝未來的第四代css布局技術(shù)

前端那些典型布局方案

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

JavaScript繼承模式

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！