您現在的位置是:首頁 > 技術教程

JavaScript如何實現對像繼承方法

曙光部落格2022-09-06 08:08:38【技術教程】

對語言有一定了解的同學應該對於“面向對像”這四個字應該是很熟悉的,對於JAVA,C#這類的編程工程師來說,這是必備的一個概念。但對於前端來說,這個概念似乎不是經常提起。

JavaScript如何實現對像繼承方法 程序開發

很多人運用JS還是以特效和框架為主,如果你不是做插件開發或者平台開發,否則基本運用不到JS裡面的面向對像編程這一個概念。JavaScript作為一門面向對像編程語言,所以基本的面向對像特征還是存在的,本文就著重講到如何運用JS實現面向對像中繼承這一個概念。在閱讀本文之前,首先得對JS中原型和原型鏈要有一定的了解,因為JS對像都是基於原型和原型鏈的,自然繼承肯定是跟原型和原型鏈有關系。

所謂繼承,就是只一個對像是可以直接使用另外一個對像的屬性或者方法的,這個過程中肯定有誰繼承誰,也就是子類繼承父類的情況。在傳統基於類的面向對像語言都會有一個關鍵字extend,但是JS中是沒有這個概念的,那麼我們該怎樣使用JS實現繼承了?

由於沒有extend關鍵字,所以JS實現繼承方式並不固定,也是利用本身的一個語法糖去進行的,所以比較靈活。總結起來,JS繼承大致有一下幾種方式

首先我們先定義一個父類

(代碼可左右滑動)

原型鏈繼承

父類對像是可以直接訪問父類的屬性或者方法的,那麼可以通過把父類對像賦值給子類原型,那麼子類也就會擁有了父類原型裡面的所有原型和方法。下面代碼實現這個過程;

(代碼可左右滑動)

缺點

要想為子類新增屬性和方法,必須要在new Animal()這樣的語句之後執行,不能放到構造器中

無法實現多繼承

來自原型對像的引用屬性是所有實例共享的

創建子類實例時,無法向父類構造函數傳參

實例繼承

為父類實例添加新特性,作為子類返回實例

(代碼可左右滑動)

缺點

實例是父類的實例,不是子類的實例

不支持多繼承

拷貝繼承

獲取到父類實例,子類拷貝父類已經存在可枚舉的屬性或者方法。

(代碼可左右滑動)

缺點

效率較低,內存占用高(因為要拷貝父類的屬性)

無法獲取父類不可枚舉的方法(不可枚舉方法,不能使用for in 訪問到)

組合繼承

通過構造函數模式和原型鏈繼承方式實現繼承,結合一起實現實例與原型雙向繼承。

(代碼可左右滑動)

缺點

調用了兩次父類構造函數,生成了兩份實例(子類實例將子類原型上的那份屏蔽了)

寄生組合繼承

在組合繼承的基礎上新建一個空的超類,作用父子類的中間類,起一起橋接的作用,解決組合模式下的產生多個實例的缺點

缺點

解決所以問題,但是實現過於復雜

END

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

Interserver Webhosting and VPS
Dynadot
TurnKey Internet
COM for just $5.98 at Namecheap