JavaScript面向?qū)ο笾欣^承的概念

本篇內(nèi)容介紹了“JavaScript面向?qū)ο笾欣^承的概念”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

一、繼承的概念

子類(lèi)共享父類(lèi)的數(shù)據(jù)和方法的行為，就叫繼承。

二、E55如何實(shí)現(xiàn)繼承？探索JavaScript繼承的本質(zhì)

2.1構(gòu)造函數(shù)之間的“復(fù)制粘貼”

第一條路是通過(guò)構(gòu)造函數(shù)來(lái)繼承，這可以理解為子類(lèi)直接復(fù)制了父類(lèi)構(gòu)造函數(shù)的代碼，然后按照一定的規(guī)矩“粘貼”在自己的構(gòu)造函數(shù)中，為己所用。舉個(gè)例子：

如果A要繼承B的屬性，是不是直接把this.name = name復(fù)制粘貼到A函數(shù)就可以了？簡(jiǎn)單粗暴。

所以在A中，直接執(zhí)行B函數(shù)，不就等于執(zhí)行了this.name = name嗎。

直接這樣嘗試下，發(fā)現(xiàn)是不行的，這是因?yàn)锽中的this指向B的實(shí)例化對(duì)象，A中的this指向A的實(shí)例化對(duì)象，所以要統(tǒng)一this的指向。

這樣，就完成了一次合乎規(guī)范的構(gòu)造函數(shù)之間的“代碼復(fù)制粘貼”，也就是繼承。這其實(shí)也是后面ES6中super關(guān)鍵字的實(shí)現(xiàn)原理。

2.2原型鏈上要“擠進(jìn)一位來(lái)客”

當(dāng)然，這還是不夠的，因?yàn)樵趯?shí)際情況中，B這個(gè)構(gòu)造函數(shù)還可以拓展一些方法和屬性到原型鏈上，比如:

我們?cè)跇?gòu)造函數(shù)B中拓展了一個(gè)skill方法，發(fā)現(xiàn)上面那種“復(fù)制粘貼”的方法不好使了對(duì)嗎？這是因?yàn)锳的原型鏈和B的原型鏈還沒(méi)有“建立聯(lián)系”，我們需要在A和B之間搭一座橋，把他們聯(lián)系起來(lái)。

熟悉基本原型鏈的同學(xué)都知道，原型鏈的“通信”是通過(guò)隱式原型(__proto__)來(lái)實(shí)現(xiàn)的。所以基本原型鏈?zhǔn)沁@樣的：

這就是基本的原型鏈，現(xiàn)在的情況是，A要繼承B的屬性和方法，所以B得加入到原型鏈中，并且，B要在A的上面，所以理想的情況是不是應(yīng)該像下面這樣：

實(shí)際上我們也確實(shí)是這么做的，也就是令A(yù).prototype.__proto__ = B.prototype。

控制臺(tái)試一下，成功了。

總結(jié)一下：ES5實(shí)現(xiàn)繼承需要兩步，第一：合乎規(guī)范的“代碼復(fù)制粘貼”；第二，原型鏈上“搭座橋”。

三、ES6實(shí)現(xiàn)繼承，其實(shí)只是換了種叫法

首先，要明確JavaScript是沒(méi)有真正“類(lèi)”的概念的，ES6中的類(lèi)，就是ES5中構(gòu)造函數(shù)。

這件事是很容易驗(yàn)證的，類(lèi)A的類(lèi)型打印出來(lái)，就是function。

ES6實(shí)現(xiàn)類(lèi)的繼承，是不是也要“兩步走”呢？答案是肯定的，看看ES6的繼承如何實(shí)現(xiàn)：

其實(shí)原理是完全一樣的，extends相當(dāng)于做了A.prototype.__proto__ = B.prototype這件事，而super則相當(dāng)于執(zhí)行了ES5中的B.call(this,name)這個(gè)操作，只是換個(gè)操作的名字向Java靠攏而已。

“JavaScript面向?qū)ο笾欣^承的概念”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！