如何理解js的繼承模式

本篇內(nèi)容主要講解“如何理解js的繼承模式”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“如何理解js的繼承模式”吧!

超過十余年行業(yè)經(jīng)驗(yàn)，技術(shù)領(lǐng)先，服務(wù)至上的經(jīng)營模式，全靠網(wǎng)絡(luò)和口碑獲得客戶，為自己降低成本，也就是為客戶降低成本。到目前業(yè)務(wù)范圍包括了：成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、成都外貿(mào)網(wǎng)站建設(shè)公司，成都網(wǎng)站推廣，成都網(wǎng)站優(yōu)化，整體網(wǎng)絡(luò)托管，微信平臺小程序開發(fā)，微信開發(fā)，APP應(yīng)用開發(fā)，同時(shí)也可以讓客戶的網(wǎng)站和網(wǎng)絡(luò)營銷和我們一樣獲得訂單和生意！

一、前言

相信很多人在遇到面試中都遇到過被問到過JavaScript繼承模式的問題，都能手寫出幾種繼承模式的代碼例子，但為什么面試官卻對你的回答不是很滿意或者壓根就沒聽懂，個(gè)人覺得應(yīng)該是缺少自己的一個(gè)答題的思路。

二、答題技巧

  第一，按照幾種繼承模式的從最次的繼承模式到最佳的繼承模式的順序去講

  第二，講出當(dāng)前這種繼承模式的利弊，相對前一種繼承模式解決了什么問題，最關(guān)鍵的代碼部分在哪里

以下著重講一下幾種常見的幾種繼承模式

二、原型鏈繼承

代碼示例

function Parent (sex) {      this.sex = sex  }  Parent.prototype.setSex = function () {}  function Son (name) {      this.name = name  }  Son.prototype = new Parent()  var s1 = new Son('DBCDouble')  console.log(s1)

結(jié)果打印

關(guān)鍵：把子類的原型指向父類的實(shí)例，從而繼承父類的私有屬性和原型屬性

優(yōu)點(diǎn)：

•  父類新增原型屬性和方法，子類實(shí)例都能訪問到

•  簡單、易用

缺點(diǎn)：

•  無法實(shí)現(xiàn)多繼承（一個(gè)子類繼承成多個(gè)父類）

•  創(chuàng)建子類實(shí)例的時(shí)候，無法向父類構(gòu)造函數(shù)傳參

•  有子類實(shí)例共享父類引用屬性的問題（因?yàn)樽宇惖脑椭赶虻氖歉割惖囊粋€(gè)實(shí)例，假如父類的私有屬性有一個(gè)是數(shù)組(引用類型)，那么任一子類都可以操作這個(gè)數(shù)組，從而導(dǎo)致其他子類使用的這個(gè)數(shù)組也會發(fā)生變化）

四、借用父類構(gòu)造函數(shù)繼承

代碼示例

function Parent (sex) {      this.sex = sex  }  Parent.prototype.setSex = function () {}  function Son (name, age, sex) {      Parent.call(this, sex)      this.name = name      this.age = age  }  var s1 = new Son('DBCdouble', 25, '男')  console.log(s1)

結(jié)果打印

關(guān)鍵：在子類構(gòu)造函數(shù)中使用call或者apply調(diào)用父類構(gòu)造函數(shù)實(shí)現(xiàn)父類私有屬性繼承（函數(shù)復(fù)用）

優(yōu)點(diǎn)：

•  創(chuàng)建子類實(shí)例時(shí)，可以向父類傳遞參數(shù)

•  可以實(shí)現(xiàn)多繼承（在子類構(gòu)造函數(shù)調(diào)用多個(gè)父類構(gòu)造函數(shù)）

•  解決了原型鏈繼承中子類實(shí)例共享父類引用屬性的問題（即使父類構(gòu)造函數(shù)中有引用類型，在創(chuàng)建子類實(shí)例時(shí)，都會重新調(diào)用父類構(gòu)造函數(shù)重新創(chuàng)建一份這個(gè)引用類型數(shù)據(jù)，重新申請引用類型的空間）

缺點(diǎn)：

•  每次創(chuàng)建子類實(shí)例時(shí)，都要調(diào)用一次父類構(gòu)造函數(shù)，影響性能

•  只繼承父類的實(shí)例屬性(私有屬性)，沒有繼承父類的原型屬性

五、組合式繼承(原型鏈繼承 + 借用構(gòu)造函數(shù)繼承)

代碼示例

function Parent (sex) {      this.sex = sex  }  Parent.prototype.setSex = function () {}  function Son (name, age, sex) {      Parent.call(this, sex)      this.name = name      this.age = age  }  Son.prototype = Object.create(Parent.prototype)  SonSon.prototype.constructor = Son  var s1 = new Son('DBCdouble', 25, '男')  console.log(s1)

打印結(jié)果

關(guān)鍵：通過調(diào)用父類構(gòu)造函數(shù)，繼承父類的屬性并保留傳參的優(yōu)點(diǎn)，并通過Object.create(Parent.prototype)來創(chuàng)建繼承了父類原型屬性的對象，并把這個(gè)對象賦給子類的原型，這樣的話，既能保證父類構(gòu)造函數(shù)不用執(zhí)行兩次，又能讓子類能繼承到父類的原型方法

優(yōu)點(diǎn)：

•  創(chuàng)建子類實(shí)例時(shí)，可以向父類傳遞參數(shù)

•  可以實(shí)現(xiàn)多繼承（在子類構(gòu)造函數(shù)調(diào)用多個(gè)父類構(gòu)造函數(shù)）

•  解決了原型鏈繼承中子類實(shí)例共享父類引用屬性的問題（即使父類構(gòu)造函數(shù)中有引用類型，在創(chuàng)建子類實(shí)例時(shí)，都會重新調(diào)用父類構(gòu)造函數(shù)重新創(chuàng)建一份這個(gè)引用類型數(shù)據(jù)，重新申請引用類型的空間）

•  父類構(gòu)造函數(shù)只用執(zhí)行一次

六、ES6的class繼承

ES6中引入了class關(guān)鍵字，class可以通過extends關(guān)鍵字實(shí)現(xiàn)繼承，還可以通過static關(guān)鍵字定義類的靜態(tài)方法，這比 ES5 的通過修改原型鏈實(shí)現(xiàn)繼承，要清晰和方便很多。

注意：ES5 的繼承，實(shí)質(zhì)是先創(chuàng)造子類的實(shí)例對象this，然后再將父類的方法添加到this上面（Parent.apply(this)）。ES6 的繼承機(jī)制完全不同，實(shí)質(zhì)是先將父類實(shí)例對象的屬性和方法加到this上面（所以必須先調(diào)用super方法），然后再用子類的構(gòu)造函數(shù)修改this。

代碼示例

class A {    constructor (sex) {      this.sex = sex    }    showSex () {      console.log('這里是父類的方法')    }  }  class B extends A {    constructor (name, age, sex) {      super(sex);      this.name = name;      this.age = age;    }    showSex () {      console.log('這里是子類的方法')    }  }  const b = new B('DBCDOUBLE', 25, '男')  console.log(b);

打印結(jié)果

關(guān)鍵：使用extends關(guān)鍵字繼承父類的原型屬性，調(diào)用super來繼承父類的實(shí)例屬性，且保留向父類構(gòu)造函數(shù)傳參的優(yōu)點(diǎn)

優(yōu)點(diǎn)：簡單易用，不用自己來修改原型鏈來完成繼承

我們通過將代碼從ES6編譯到ES5來看看到底，class繼承的代碼最終會被編譯成什么樣，如下：

從上圖分析得到：

•  上述代碼示例中的super指的就是父類構(gòu)造函數(shù)

•  子類繼承父類的實(shí)例屬性最終還是通過call或者apply來實(shí)現(xiàn)繼承的

•  通過extends方法的調(diào)用來修改子類和父類的原型鏈關(guān)系

再看經(jīng)過編譯后的extends方法，如下

  1、注意Object.setPrototypeOf()方法設(shè)置一個(gè)指定的對象的原型 ( 即, 內(nèi)部[[Prototype]]屬性）到另一個(gè)對象或 null。

  2、(.prototype = b.prototype, new ())表達(dá)式的執(zhí)行執(zhí)行順序是先執(zhí)行前者，再返回后者

從上圖可知，extends做了以下幾件事：

•  定義了一個(gè)function __() {}函數(shù)，并把該函數(shù)的constructor指向了子類

•  緊接著，把function __() {} 函數(shù)的原型指向了父類的原型

•  最后再把function () {} 函數(shù)的實(shí)例賦給了子類函數(shù)，就這樣子類的實(shí)例就能沿著proto.proto獲取到父類的原型屬性了，這種繼承模式俗稱圣杯模式 

到此，相信大家對“如何理解js的繼承模式”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

網(wǎng)頁標(biāo)題：如何理解js的繼承模式
網(wǎng)站URL：http://bm7419.com/article24/igcpce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、外貿(mào)建站、微信公眾號、網(wǎng)站策劃、網(wǎng)站建設(shè)、移動網(wǎng)站建設(shè)

廣告

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