JS中繼承方案 羅列常見的四種

2021-10-06 23:20:03 字數 2333 閱讀 4863

1原型繼承:子類的原型指向父類的乙個例項

//父類

function

person()

person.prototype.

getname

=function

getname()

;//子類

function

boy(

) boy.prototype.

getbname

=function

getbname()

;//boy子類 => person父類,讓子類boy的原型指向父類person的例項

通過b.prototype = new a這一句話達成繼承。

js中的物件導向的機制都是基於原型鏈完成的,所以js中的繼承也可以是基於原型鏈的,但這其中又有很多弊端。

2 call繼承

//父類

function

person()

person.prototype.

getname

=function

getname()

;//子類

function

boy(

) boy.prototype.

getbname

=function

getbname()

;let boy =

newboy

; console.

log(boy)

; boy.

getbname()

;//列印周星星

call繼承只能繼承父類中的私有屬性(繼承的私有屬性賦值給子類例項的私有屬性),而且是類似拷貝過來乙份,不是鏈式查詢;因為只是把父類當做普通的方法執行,所以父類原型上的公有屬性方法無法被繼承過來。

3寄生組合繼承:call繼承 + 變異版的原型繼承共同完成

//父類

function

person()

person.prototype.

getname

=function

getname()

;//子類

function

boy(

)//=>object.create(obj) 建立乙個空物件,讓其__proto__指向obj(把obj作為空物件的原型)

boy.prototype = object.

create

(person.prototype)

; boy.prototype.constructor = boy;

//把constructor補上

利用了call繼承實現私有到私有,利用原型繼承實現了公有到公有。

4 es6中的class類繼承(語法糖)

class

person

getname()

}//=>extends繼承和寄生組合繼承基本類似

其實extends繼承和寄生組合繼承基本類似,而且必須加上super()函式,它相當於a.call(this)。

JS 繼承的四種方式

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

js繼承的四種實現方式

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

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

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