js的繼承

一、 簡(jiǎn)單原型繼承

function Parent() {
  this.a = 1;
  this.b = [1];
}
Parent.prototype.hello = function() {}

function Child(name) {
  this.name = name;
}
Child.prototype = new Parent(); // 核心
Child.prototype.constructor = Child; // 修正Child的構(gòu)造函數(shù)

let child1 = new Child("child1");
let child2 = new Child("child2");

核心:使用父類的實(shí)例來作為子類的原型對(duì)象
缺點(diǎn):1.父類的引用屬性會(huì)在子類實(shí)例中共享 2.創(chuàng)建子類實(shí)例時(shí)無法給父類構(gòu)造函數(shù)傳參

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

function Parent(num) {
  this.a = num;
  this.b = [1];
  this.hello2 = function() {} // 此函數(shù)會(huì)被復(fù)制到子類
}
Parent.prototype.hello = function() {} // 此函數(shù)不會(huì)被復(fù)制到子類

function Child(name, num) {
  Parent.call(this, num); // 核心
  this.name = name;
}

let child1 = new Child("child1", 1);
let child2 = new Child("child2", 2);

核心:借用父類的構(gòu)造函數(shù),將父類的屬性復(fù)制給子類實(shí)例,沒有用到原型
優(yōu)點(diǎn):解決了簡(jiǎn)單原型繼承的兩個(gè)問題
缺點(diǎn):由于沒有用到原型,父類復(fù)制來的函數(shù)無法實(shí)現(xiàn)復(fù)用

三、 組合繼承

function Parent(num) {
  this.a = num;
  this.b = [1];
}
Parent.prototype.hello = function() {}

function Child(name, num) {
  Parent.call(this, num); // 核心
  this.name = name;
}
Child.prototype = new Parent(); // 核心,此處實(shí)例化了一個(gè)多余的父類對(duì)象
Child.prototype.constructor = Child; // 修正Child的構(gòu)造函數(shù)

let child1 = new Child("child1", 1);
let child2 = new Child("child2", 2);

核心:將上述兩種方式組合起來使用,將需要復(fù)用的函數(shù)都放在原型上,將需要復(fù)制的屬性通過借用構(gòu)造函數(shù)復(fù)制給子類實(shí)例
優(yōu)點(diǎn):解決了所有問題
缺點(diǎn):實(shí)例化了一個(gè)“多余”的父類對(duì)象

四、 寄生組合繼承

function Parent(num) {
  this.a = num;
  this.b = [1];
}
Parent.prototype.hello = function() {}

function Child(name, num) {
  Parent.call(this, num); // 核心
  this.name = name;
}
function extend(child, parent) {
  let F = function() {};
  F.prototype = parent.prototype;
  child.prototype = new F(); // 核心,用一個(gè)空函數(shù)來避免實(shí)例化屬性的浪費(fèi)
  child.prototype.constructor = child; // 修正構(gòu)造函數(shù)
}
extend(Child, Parent); // 核心

let child1 = new Child("child1", 1);
let child2 = new Child("child2", 2);

核心:與組合繼承基本一樣,只是針對(duì)多余的實(shí)例化進(jìn)行了優(yōu)化
優(yōu)點(diǎn):解決了所有問題
缺點(diǎn):比較麻煩……

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • JS作為面向?qū)ο蟮娜躅愋驼Z言,繼承也是其非常強(qiáng)大的特性之一。那么如何在JS中實(shí)現(xiàn)繼承呢?讓我們拭目以待。 JS繼承...
    依依玖玥閱讀 291評(píng)論 0 2
  • 一.原型鏈### 原型鏈的基本思想是利用原型讓一個(gè)引用類型繼承另一個(gè)引用類型的屬性和方法。每一個(gè)構(gòu)造函數(shù)都有一個(gè)原...
    Devour_z閱讀 239評(píng)論 0 0
  • 繼承 Javascript中繼承都基于兩種方式:1.通過原型鏈繼承,通過修改子類原型的指向,使得子類實(shí)例通過原型鏈...
    LeoCong閱讀 404評(píng)論 0 0
  • 博客內(nèi)容:什么是面向?qū)ο鬄槭裁匆嫦驅(qū)ο竺嫦驅(qū)ο缶幊痰奶匦院驮瓌t理解對(duì)象屬性創(chuàng)建對(duì)象繼承 什么是面向?qū)ο?面向?qū)ο?..
    _Dot912閱讀 1,534評(píng)論 3 12
  • 極簡(jiǎn)是一種方式,切實(shí)可行的方式,這種方式可以讓你擁有更多的時(shí)間,更多的金錢,更多的自由。 尤其是在當(dāng)下物質(zhì)生活眼花...
    LeonalGU閱讀 679評(píng)論 0 1

友情鏈接更多精彩內(nèi)容