JavaScript 的繼承是通過原型鏈實現(xiàn)的，要實現(xiàn)繼承需要理解原型和原型鏈的概念。

原型和原型鏈

1、僅函數(shù)上存在 prototype 屬性（這是一個顯式原型屬性），其指向原型對象，原型對象上存在兩個屬性：constructor 和 [[prototype]] (無法訪問，部分瀏覽器可通過?__proto__?訪問，這是一個隱式的原型屬性)

• constructor ：指向構(gòu)造函數(shù)，即是函數(shù)自身

• [[prototype]]（__proto__）：指向構(gòu)造函數(shù)的原型對象，即 Object ，Object.__proto__ = null

2、當(dāng)通過 new 調(diào)用這個函數(shù)時，得到的對象會存在 [[prototype]]（__proto__），指向的是函數(shù)的 prototype 屬性

3、所有的對象上都存在 [[prototype]]（__proto__）屬性

4、這種通過?__proto__?在各對象間建立鏈接的工具就是原型鏈，通過原型鏈可以訪問到其他對象的屬性和方法

繼承的實現(xiàn)方式

繼承指一個對象直接使用另一對象的屬性和方法。JavaScript 的繼承是通過原型鏈實現(xiàn)的。

實現(xiàn)屬性繼承的核心代碼是：

SuperFn.call(this)

實現(xiàn)方法繼承的核心代碼是：

?SubFn.prototype.__proto__ = SuperFn.prototype

具體實現(xiàn)方式有以下6種：

1、ES6 class類 extends 繼承

通過ES6 新增的語法糖實現(xiàn)繼承

2、基于原型繼承

原型賦值SubFn.prototype = new SuperFn();

問題點：

• 原型對象的 constructor 屬性值變?yōu)?Object

• 原型對象中包含引用值，值操作會同時反應(yīng)到所有繼承對象上

• 子類型在實例化時不能給父類型的構(gòu)造函數(shù)傳參

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

構(gòu)造函數(shù)內(nèi)部執(zhí)行?SuperFn.call(this)，只能繼承屬性，不能繼承原型鏈上的方法

問題點：

• 只能繼承父類的實例屬性和方法，不能繼承原型屬性/方法

• 字類構(gòu)造函數(shù)無法實現(xiàn)復(fù)用，每個子類都有父類實例函數(shù)的副本

4、組合繼承

構(gòu)造函數(shù)內(nèi)部執(zhí)行?SuperFn.call(this)，原型賦值?SubFn.prototype.__proto__ = SuperFn.prototype;

5、原型式繼承

此種方式和?subObj = Object.create(superObj)實現(xiàn)的功能相同

6、寄生式組合繼承

構(gòu)造函數(shù)內(nèi)部執(zhí)行?SuperFn.call(this)，原型賦值?SubFn.prototype = Object.create(SuperFn.prototype);

作者及圖片來源：單線程

版權(quán)聲明：藍橋云課僅做分享使用，如有侵權(quán)，聯(lián)系刪除！

看完作者“單線程”的分享，想必大家對于JavaScript 的繼承已經(jīng)有所了解。同時，為了幫助大家更好實戰(zhàn)，學(xué)姐給大家找來了該作者在“藍橋云課”的實戰(zhàn)課——《JavaScript 從零構(gòu)建音樂播放器》

本實驗采用原生 JavaScript 搭建類似網(wǎng)易云的音樂播放器。

應(yīng)用到的技術(shù)包括?：ES6 新增的語法糖如解構(gòu)賦值、箭頭函數(shù)、展開運算符模板字符串 ，異步處理 Promise，ES6 模塊化，異步網(wǎng)絡(luò)請求 Ajax，單頁面應(yīng)用思想，數(shù)據(jù)響應(yīng)式思想。

通過上述技術(shù)最終完成頁面切換，輪播圖，音樂播放器等功能。

如果你是“藍橋云課”的學(xué)習(xí)會員，那么你可以免費學(xué)習(xí)該課程。

課程免費學(xué)習(xí)方式：

• 復(fù)制下方鏈接到瀏覽器→進行學(xué)生認證→點擊確認購買

https://www.lanqiao.cn/vip?member_type=premium/?from=wechat

現(xiàn)在添加會員

還送獨家定制算法模板鼠標(biāo)墊
數(shù)量有限，先到先得

↓↓↓

最后，如果你對你的編程能力有信心，那么來做一下《每日一題》測試下程度吧→藍橋杯真題——信號覆蓋