繼承有幾種方式，分別是什麼？想要實現繼承可使用什麼方法？

這裏是修真院前端小課堂，每篇分享文從

【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴展思考】【更多討論】【參考文獻】

八個方面深度解析前端知識/技能，本篇分享的是：

【 繼承有幾種方式，分別是什麼？想要實現繼承可使用什麼方法？  】

【修真院xx（職業）小課堂】課題名稱

開場語：

你們好，我是IT修真院XX分院第X期的學員XX，一枚正直純潔善良的XX程序員，今天給你們分享一下，修真院官網XX（職業）任務X，深度思考中的知識點——XXX

（1）背景介紹：

對象：「無序屬性的結合，其屬性值能夠包含基本值、對象或者函數」。

面向對象編程（OOP）：核心思想是將各類複雜關係，抽象成一個個對象，而後由對象之間的分工合做，完成對真實世界的模擬。

在JS中繼承是一個很是複雜的話題，比其餘任何面嚮對象語言中的繼承都複雜得多。在大多數其餘面嚮對象語言中，繼承一個類只需使用一個關鍵字便可。在JS中想要達到繼承公用成員的目的，須要採起一系列措施。

（2）知識剖析：

JavaScript語言的對象體系，不是基於「類」，而是基於構造函數（constructor）和原型（prototype）

原型對象：只要建立一個新函數，就會根據特定的規則爲該函數建立一個prototype屬性指向其原型對象，默認狀況下原型對象會自動得到一個constructor屬性，該屬性包含一個指向prototype屬性所在函數的指針

 

構造函數：自己是一個函數，出於建立特定類型新對象的目的而定義的，內部使用this變量，須要和new配合使用來建立實例，this變量會綁定在實例對象上。

封裝模式：將「屬性」和「方法」封裝成對象的模式，即建立對象的方式

 

 

 

 

 

 

繼承概念
許多OO語言都支持兩種繼承方式：接口繼承和實現繼承，接口繼承只繼承方法簽名，實現繼承則繼承實際的方法

 

（3）常見問題：

js如何實現繼承？

（4）解決方案：

 

Cat如何繼承Animal的species屬性

 

 

 

 

d.png](/img/bVbmXji)

![圖片上傳中...]

 

（5）編碼實戰：

現階段中運用比較普遍的是組合式繼承，由於原型鏈和構造函數繼承方式都有相對應的缺點，好比說原型鏈最主要的問題來自包含引用類型值的原型。而構造函數的缺點是不能很好地封裝對象方法。通常狀況下只有對象沒有方法的狀況下才會使用構造函數。而組合式繼承繼承了原型鏈和構造函數的優勢，並完善了兩者的不足。function Fn1(){

this.colors=["red","blue","green"];

}

function Fn2(){

}

Fn2.prototype=new Fn1();//繼承了Fn1()對象

var instance1 = new Fn2();

instance1.colors.push("black");

console.log(instance1.colors);//"red","blue","green","black"

var instance2 = new Fn2();

console.log(instance2.colors);//"red","blue","green","black"

 

（6）拓展思考：

ES6中JavaScript擁有類的概念了，參考java等語言思考JavaScript如何使用類來簡化封裝、繼承。

（7）參考文獻：

參考：阮一峯的網絡日誌

參考：JavaScript高級程序設計

（8）更多討論：

Q1：繼承通常用到什麼地方？

A ：一般在通常的項目裏不須要，由於應用簡單，但你要用純js作一些複雜的工具或框架系統就要用到了，好比webgis、或者js框架如jquery、angular、vue什麼的，否則一個幾千行代碼的框架不用繼承得寫幾萬行，甚至還沒法維護。

Q2：如何肯定原型和實例之間的關係？ 

A：兩種方法：第一種是使用instanceOf操做符，第二種是使用isPrototypeOf()方法。 

eg：

console.log(person instanceOf Child);//true 

console.log(Child.prototype.isPrototypeOf(instance));//true 

Q3：什麼是淺複製？

A ：淺複製是複製引用，複製後的引用都是指向同一個對象的實例，彼此之間的操做會互相影響。

（9）鳴謝：

感謝馮強師兄，此教程是在他們以前技術分享的基礎上完善而成。

（10）結束語：

今天的分享就到這裏啦，歡迎你們點贊、轉發、留言、拍磚