JavaScript繼承方式詳解

Yangyang 發(fā)布于2019-08-21 10:23 / 912人閱讀

摘要：可以通過(guò)構(gòu)造函數(shù)和原型的方式模擬實(shí)現(xiàn)類(lèi)的功能。原型式繼承與類(lèi)式繼承類(lèi)式繼承是在子類(lèi)型構(gòu)造函數(shù)的內(nèi)部調(diào)用超類(lèi)型的構(gòu)造函數(shù)。寄生式繼承這種繼承方式是把原型式工廠(chǎng)模式結(jié)合起來(lái)，目的是為了封裝創(chuàng)建的過(guò)程。

js繼承的概念

js里常用的如下兩種繼承方式：

原型鏈繼承（對(duì)象間的繼承）
類(lèi)式繼承（構(gòu)造函數(shù)間的繼承）

由于js不像java那樣是真正面向?qū)ο蟮恼Z(yǔ)言，js是基于對(duì)象的，它沒(méi)有類(lèi)的概念。所以，要想實(shí)現(xiàn)繼承，可以用js的原型prototype機(jī)制或者用apply和call方法去實(shí)現(xiàn)

在面向?qū)ο蟮恼Z(yǔ)言中，我們使用類(lèi)來(lái)創(chuàng)建一個(gè)自定義對(duì)象。然而js中所有事物都是對(duì)象，那么用什么辦法來(lái)創(chuàng)建自定義對(duì)象呢？這就需要用到js的原型：

我們可以簡(jiǎn)單的把prototype看做是一個(gè)模版，新創(chuàng)建的自定義對(duì)象都是這個(gè)模版（prototype）的一個(gè)拷貝（實(shí)際上不是拷貝而是鏈接，只不過(guò)這種鏈接是不可見(jiàn)，新實(shí)例化的對(duì)象內(nèi)部有一個(gè)看不見(jiàn)的__Proto__指針，指向原型對(duì)象）。

js可以通過(guò)構(gòu)造函數(shù)和原型的方式模擬實(shí)現(xiàn)類(lèi)的功能。另外，js類(lèi)式繼承的實(shí)現(xiàn)也是依靠原型鏈來(lái)實(shí)現(xiàn)的。

原型式繼承與類(lèi)式繼承

類(lèi)式繼承是在子類(lèi)型構(gòu)造函數(shù)的內(nèi)部調(diào)用超類(lèi)型的構(gòu)造函數(shù)。
嚴(yán)格的類(lèi)式繼承并不是很常見(jiàn)，一般都是組合著用：

function Super(){
    this.colors=["red","blue"];
}
 
function Sub(){
    Super.call(this);
}

原型式繼承是借助已有的對(duì)象創(chuàng)建新的對(duì)象，將子類(lèi)的原型指向父類(lèi)，就相當(dāng)于加入了父類(lèi)這條原型鏈

原型鏈繼承

為了讓子類(lèi)繼承父類(lèi)的屬性（也包括方法），首先需要定義一個(gè)構(gòu)造函數(shù)。然后，將父類(lèi)的新實(shí)例賦值給構(gòu)造函數(shù)的原型。代碼如下：

以上原型鏈繼承還缺少一環(huán)，那就是Object，所有的構(gòu)造函數(shù)都繼承自Object。而繼承Object是自動(dòng)完成的，并不需要我們自己手動(dòng)繼承，那么他們的從屬關(guān)系是怎樣的呢？

確定原型和實(shí)例的關(guān)系

可以通過(guò)兩種方式來(lái)確定原型和實(shí)例之間的關(guān)系。操作符instanceof和isPrototypeof()方法：

alert(brother instanceof Object)//true
alert(test instanceof Brother);//false,test 是brother的超類(lèi)
alert(brother instanceof Child);//true
alert(brother instanceof Parent);//true

只要是原型鏈中出現(xiàn)過(guò)的原型，都可以說(shuō)是該原型鏈派生的實(shí)例的原型，因此，isPrototypeof()方法也會(huì)返回true

在js中，被繼承的函數(shù)稱(chēng)為超類(lèi)型（父類(lèi)，基類(lèi)也行），繼承的函數(shù)稱(chēng)為子類(lèi)型（子類(lèi)，派生類(lèi)）。使用原型繼承主要由兩個(gè)問(wèn)題：
一是字面量重寫(xiě)原型會(huì)中斷關(guān)系，使用引用類(lèi)型的原型，并且子類(lèi)型還無(wú)法給超類(lèi)型傳遞參數(shù)。

偽類(lèi)解決引用共享和超類(lèi)型無(wú)法傳參的問(wèn)題，我們可以采用“借用構(gòu)造函數(shù)”技術(shù)

借用構(gòu)造函數(shù)（類(lèi)式繼承）

借用構(gòu)造函數(shù)雖然解決了剛才兩種問(wèn)題，但沒(méi)有原型，則復(fù)用無(wú)從談起，所以我們需要原型鏈+借用構(gòu)造函數(shù)的模式，這種模式稱(chēng)為組合繼承

組合繼承

組合式繼承是比較常用的一種繼承方法，其背后的思路是使用原型鏈實(shí)現(xiàn)對(duì)原型屬性和方法的繼承，而通過(guò)借用構(gòu)造函數(shù)來(lái)實(shí)現(xiàn)對(duì)實(shí)例屬性的繼承。這樣，既通過(guò)在原型上定義方法實(shí)現(xiàn)了函數(shù)復(fù)用，又保證每個(gè)實(shí)例都有它自己的屬性。

call()的用法：調(diào)用一個(gè)對(duì)象的一個(gè)方法，以另一個(gè)對(duì)象替換當(dāng)前對(duì)象。

call([thisObj[,arg1[, arg2[, [,.argN]]]]])

原型式繼承

這種繼承借助原型并基于已有的對(duì)象創(chuàng)建新對(duì)象，同時(shí)還不用創(chuàng)建自定義類(lèi)型的方式稱(chēng)為原型式繼承

原型式繼承首先在obj()函數(shù)內(nèi)部創(chuàng)建一個(gè)臨時(shí)性的構(gòu)造函數(shù) ，然后將傳入的對(duì)象作為這個(gè)構(gòu)造函數(shù)的原型，最后返回這個(gè)臨時(shí)類(lèi)型的一個(gè)新實(shí)例。

寄生式繼承

這種繼承方式是把原型式+工廠(chǎng)模式結(jié)合起來(lái)，目的是為了封裝創(chuàng)建的過(guò)程。

組合式繼承的小問(wèn)題

組合式繼承是js最常用的繼承模式，但組合繼承的超類(lèi)型在使用過(guò)程中會(huì)被調(diào)用兩次；一次是創(chuàng)建子類(lèi)型的時(shí)候，另一次是在子類(lèi)型構(gòu)造函數(shù)的內(nèi)部

以上代碼是之前的組合繼承，那么寄生組合繼承，解決了兩次調(diào)用的問(wèn)題。

寄生組合式繼承

call和apply

全局函數(shù)apply和call可以用來(lái)改變函數(shù)中this的指向，如下：

 // 定義一個(gè)全局函數(shù)
    function foo() {
        console.log(this.fruit);
    }
    
    // 定義一個(gè)全局變量
    var fruit = "apple";
    // 自定義一個(gè)對(duì)象
    var pack = {
        fruit: "orange"
    };
    
    // 等價(jià)于window.foo();
    foo.apply(window);  // "apple",此時(shí)this等于window
    // 此時(shí)foo中的this === pack
    foo.apply(pack);    // "orange"