js繼承的四種方式超詳細解讀

2021-10-06 15:48:25 字數 2847 閱讀 2633

對於不熟悉js原型的小白,可以先去看下這篇js原型和原型鏈

有利於下面對於js繼承方式的理解。

在es6以前是沒有類這些概念的,所以在繼承方式上要從原型上開始。

一、原先鏈繼承

function

father()

;father.prototype.

say=

function()

//這裡其實可以把父原型物件傳給子原型物件,son.prototype=father.prototype,但缺點就是一旦改變子原型物件,父原型物件也會跟著改變,可以看下面的圖,所以不採用這種。

son.prototype =

newfather()

;//這裡也要注意,son原型物件被賦予父例項物件以後,son原型物件的constructor屬性會改變成father,所以這裡要重新賦值

son.prototype=father.prototype,但缺點就是一旦改變子原型物件,父原型物件也會跟著改變,不能傳參。可以看下面的圖,所以不採用這種。

son.prototype = new father();這種方式才是正確的

這種繼承方式優點是:簡單方便

缺點是:不能向父類傳遞引數

二、借用建構函式繼承

使用這種方法前,我們必須call()的運用,看一下**

functionfn(

)varo=

fn.call(o

);//call()方法有兩個作用,1是呼叫函式的作用;2是改變this指向的作用

function

father

(name, age)};

function

son(name, age)

;var son =

newson

('yudong',22

);console.

log(son.name)

;//yudong

console.

log(son.age)

;//22

console.

log(son.

say())

;

這種繼承方式同樣存在缺點:每建立乙個例項都會重新建立一遍方法,浪費記憶體

三、組合繼承的方式

組合繼承就是把原型鏈的方法繼承和借用建構函式繼承的屬性繼續結合起來,這樣就可以避免上面浪費記憶體的缺點了,最大限度節省了記憶體,但還是會有缺點:會呼叫兩次父類

function

father

(name, age)

; father.prototype.

say=

function()

function

son(name, age)

; son.prototype =

newfather

;//第二次呼叫

var son =

newson

('yudong',22

);console.

log(son.name)

;//yudong

console.

log(son.age)

;//22

console.

log(son.

say())

;

四、寄生組合繼承

組合繼承缺點是兩次呼叫父類,那我們如何去改變這個缺點呢?

用寄生組合的方式可以完美解決這個問題

function

father

(name, age)

; father.prototype.

say=

function()

function

son();

//這裡的內部原理先占個坑位,後面詳細補上

son.prototype = object.

create

(father.prototype)

; son.prototype.

say=

function()

var son =

newson

('yudong',22

,133);

var father =

newfather()

; console.

log(father.say)

;console.

log(son.name)

;//yudong

console.

log(son.age)

;//22

console.

log(son.say)

;son.say

細節方面的東西先占個坑,比如寄生式繼承原理

JS 繼承的四種方式

js 本身是基於物件導向開發的程式語言。類 封裝 繼承 多型 繼承機制使得不同的例項可以共享建構函式的原型物件的屬性和方法 以下情況都是 b 為子類,a 為父類 基本思想是利用原型讓乙個引用型別繼承另乙個引用型別的屬性和方法。我們知道每個建構函式都有乙個原型物件 prototype 原型物件都包含乙...

js繼承的四種實現方式

一 原型鏈繼承 核心 將父類的例項作為子類的原型。宣告乙個動物的類 function animal name animal.prototype.公 父類新增原型方法 原型屬性,子類都能訪問到 animal.prototype.age 3 animal.prototype.sleep function...

js繼承的四種方式,例項詳解

js 本身是基於物件導向開發的語言 封裝 繼承 多型 封裝 類也是乙個函式,把實現乙個 的功能進行封裝,以此實現 低耦合高內聚 多型 過載 重寫 重寫 子類重寫父類上的方法 過載 相同的方法,由於引數或者返回值不同,具備了不同的功能。js中的過載 同乙個方法內,根據傳參不同實現不同的功能 繼承 子類...