Web前端學(xué)習(xí)之Javascript繼承的常用4種方法

今天小編要跟大家分享的文章是關(guān)于Javascript繼承的常用4種方法。相信很多學(xué)習(xí)web前端開發(fā)技術(shù)的小伙伴在學(xué)習(xí)前端開發(fā)的javascript部分的時(shí)候，在面向?qū)ο蟮牟糠志秃茈y走下去了，主要的原因還是邏輯更加復(fù)雜了，需要理解的內(nèi)容比直觀的開發(fā)布局難一點(diǎn)。

創(chuàng)新互聯(lián)公司長(zhǎng)期為數(shù)千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為浙江企業(yè)提供專業(yè)的網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作，浙江網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

在面向?qū)ο缶幊汤?，封裝和繼承是比較重要的，這中間，繼承是相對(duì)而言比較難理解的，因?yàn)閖avascript的繼承方式比較多，也有不同的優(yōu)缺點(diǎn)。今天小編為大家?guī)磉@篇文章就是來和大家一起說一說Javascript繼承的常用4種方法，希望能夠?qū)δ阌兴鶐椭?/p>

1、原型鏈繼承

核心：將父類的實(shí)例作為子類的原型

缺點(diǎn)：父類新增原型方法/原型屬性，子類都能訪問到，父類一變其它的都變了

2、構(gòu)造繼承

基本思想

借用構(gòu)造函數(shù)的基本思想就是利用call或者apply把父類中通過this指定的屬性和方法復(fù)制(借用)到子類創(chuàng)建的實(shí)例中。

因?yàn)閠his對(duì)象是在運(yùn)行時(shí)基于函數(shù)的執(zhí)行環(huán)境綁定的。也就是說，在全局中，this等于window，而當(dāng)函數(shù)被作為某個(gè)對(duì)象的方法調(diào)用時(shí)，this等于那個(gè)對(duì)象。

call、apply方法可將一個(gè)函數(shù)的對(duì)象上下文從初始的上下文改變?yōu)橛蓆hisObj指定的新對(duì)象。

所以，這個(gè)借用構(gòu)造函數(shù)就是，new對(duì)象的時(shí)候(new創(chuàng)建的時(shí)候，this指向創(chuàng)建的這個(gè)實(shí)例)，創(chuàng)建了一個(gè)新的實(shí)例對(duì)象，并且執(zhí)行Parent里面的代碼，而Parent里面用call調(diào)用了Person，也就是說把this指向改成了指向新的實(shí)例，所以就會(huì)把Person里面的this相關(guān)屬性和方法賦值到新的實(shí)例上，而不是賦值到Person上面,所以所有實(shí)例中就擁有了父類定義的這些this的屬性和方法。

因?yàn)閷傩允墙壎ǖ絫his上面的，所以調(diào)用的時(shí)候才賦到相應(yīng)的實(shí)例中，各個(gè)實(shí)例的值就不會(huì)互相影響了。

核心：使用父類的構(gòu)造函數(shù)來增強(qiáng)子類實(shí)例，等于是復(fù)制父類的實(shí)例屬性給子類(沒用到原型)

缺點(diǎn)：方法都在構(gòu)造函數(shù)中定義，

只能繼承父類的實(shí)例屬性和方法，不能繼承原型屬性/方法，無法實(shí)現(xiàn)函數(shù)復(fù)用，每個(gè)子類都有父類實(shí)例函數(shù)的副本，影響性能

3、組合繼承

組合繼承(所有的實(shí)例都能擁有自己的屬性，并且可以使用相同的方法，組合繼承避免了原型鏈和借用構(gòu)造函數(shù)的缺陷，結(jié)合了兩個(gè)的優(yōu)點(diǎn)，是最常用的繼承方式)

核心：通過調(diào)用父類構(gòu)造，繼承父類的屬性并保留傳參的優(yōu)點(diǎn)，然后再通過將父類實(shí)例作為子類原型，實(shí)現(xiàn)函數(shù)復(fù)用

缺點(diǎn)：調(diào)用了兩次父類構(gòu)造函數(shù)，生成了兩份實(shí)例(子類實(shí)例將子類原型上的那份屏蔽了)

4、寄生組合繼承

核心：通過寄生方式，砍掉父類的實(shí)例屬性，這樣，在調(diào)用兩次父類的構(gòu)造的時(shí)候，就不會(huì)初始化兩次實(shí)例方法/屬性，避免的組合繼承的缺點(diǎn)

缺點(diǎn)：堪稱完美，但實(shí)現(xiàn)較為復(fù)雜

以上就是小編今天為大家分享的關(guān)于web前端學(xué)習(xí)之Javascript繼承的常用4種方法的文章，希望本篇文章能夠?qū)φ趯W(xué)習(xí)web前端技術(shù)的小伙伴們有所幫助。想要了解更多web前端知識(shí)記得關(guān)注北大青鳥web培訓(xùn)官網(wǎng)。

文章轉(zhuǎn)載自公眾號(hào)：前端研究所

js中實(shí)現(xiàn)多繼承（合并多個(gè)class）

const?mixinClass?=?(base,?...mixins)?=?{

const?mixinProps?=?(target,?source)?=?{

Object.getOwnPropertyNames(source).forEach(prop?=?{

if?(/^constructor$/.test(prop))?{?return;?}

Object.defineProperty(target,?prop,?Object.getOwnPropertyDescriptor(source,?prop));

})

};

let?Ctor;

if?(base??typeof?base?===?'function')?{

Ctor?=?class?extends?base?{

constructor(...props)?{

super(...props);

}

};

mixins.forEach(source?=?{

mixinProps(Ctor.prototype,?source.prototype);

});

}?else?{

Ctor?=?class?{};

}

return?Ctor;

};

JavaScript六種繼承方式？

繼承是面向?qū)ο缶幊讨杏忠环浅Ｖ匾母拍睿琂avaScript支持實(shí)現(xiàn)繼承，不支持接口繼承，實(shí)現(xiàn)繼承主要依靠原型鏈來實(shí)現(xiàn)的。

原型鏈

首先得要明白什么是原型鏈，昆明北大青鳥建議可以在一篇文章看懂proto和prototype的關(guān)系及區(qū)別中講得非常詳細(xì)

原型鏈繼承基本思想就是讓一個(gè)原型對(duì)象指向另一個(gè)類型的實(shí)例

添加方法

在給SubType原型添加方法的時(shí)候，如果，父類上也有同樣的名字，SubType將會(huì)覆蓋這個(gè)方法，達(dá)到重新的目的。但是這個(gè)方法依然存在于父類中。

記住不能以字面量的形式添加，因?yàn)?，上面說過通過實(shí)例繼承本質(zhì)上就是重寫，再使用字面量形式，又是一次重寫了，但這次重寫沒有跟父類有任何關(guān)聯(lián)，所以就會(huì)導(dǎo)致原型鏈截?cái)唷?/p>

問題

單純的使用原型鏈繼承，主要問題來自包含引用類型值的原型。

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

此方法為了解決原型中包含引用類型值所帶來的問題。

這種方法的思想就是在子類構(gòu)造函數(shù)的內(nèi)部調(diào)用父類構(gòu)造函數(shù)，可以借助apply()和call()方法來改變對(duì)象的執(zhí)行上下文

傳遞參數(shù)

借助構(gòu)造函數(shù)還有一個(gè)優(yōu)勢(shì)就是可以傳遞參數(shù)

本文標(biāo)題：javascript繼承多個(gè)類,js可以多繼承嗎
路徑分享：http://jinyejixie.com/article4/dssohoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、全網(wǎng)營銷推廣、網(wǎng)站排名、動(dòng)態(tài)網(wǎng)站、響應(yīng)式網(wǎng)站、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)