JS繼承實現的幾種方式及其優缺點

ymyang 發布于2019-08-22 11:06 / 3451人閱讀

摘要：原型繼承缺點子類實例共享屬性，造成實例間的屬性會相互影響可以看到子類的實例屬性皆來自于父類的一個實例，即子類共享了同一個實例共享了父類的方法構造函數繼承缺點父類的方法沒有被共享，造成內存浪費子實例的屬性都是相互獨立的實例方法也是獨立的，沒有

原型繼承

缺點: 子類實例共享屬性，造成實例間的屬性會相互影響

function Parent1() {
  this.name = ["super1"]
  this.reName = function () {
    this.name.push("super111")
  }
}
function Child1() {

}
Child1.prototype = new Parent1()
var child11 = new Child1()
var child12 = new Child1()
var parent1 = new Parent1()
child11.reName()
console.log(child11.name, child12.name) // [ "super1", "super111" ] [ "super1", "super111" ], 可以看到子類的實例屬性皆來自于父類的一個實例，即子類共享了同一個實例
console.log(child11.reName === child12.reName) // true, 共享了父類的方法

構造函數繼承

缺點: 父類的方法沒有被共享，造成內存浪費

function Child2() {
  Parent1.call(this)
}

var child21 = new Child2()
var child22 = new Child2()
child21.reName()
console.log(child21.name, child22.name) // [ "super1", "super111" ] [ "super1" ], 子實例的屬性都是相互獨立的
console.log(child21.reName === child22.reName) // false, 實例方法也是獨立的，沒有共享同一個方法

組合繼承

缺點: 父類構造函數被調用兩次,子類實例的屬性存在兩份。造成內存浪費

function Parent3() {
  this.name = ["super3"]
}
Parent3.prototype.reName = function() {
  this.name.push("super31")
}
function Child3() {
  Parent3.call(this) // 生成子類的實例屬性(但是不包括父對象的方法)
}
Child3.prototype = new Parent3() // 繼承父類的屬性和方法(副作用: 父類的構造函數被調用的多次，且屬性也存在兩份造成了內存浪費)
var child31 = new Child3()
var child32 = new Child3()
child31.reName()
console.log(child31.name, child32.name) // [ "super3", "super31" ] [ "super3" ], 子類實例不會相互影響
console.log(child31.reName === child32.reName) //true, 共享了父類的方法

寄生繼承

完美：子類都有各自的實例不會相互影響，且共享了父類的方法

function Parent4() {
  this.name = ["super4"]
}
Parent4.prototype.reName = function() {
  this.name.push("super41")
}
function Child4() {
  Parent4.call(this) // 生成子類的實例屬性(但是不包括父對象的方法)
}
Child4.prototype = Object.create(Parent4.prototype) // 該方法會使用指定的原型對象及其屬性去創建一個新的對象
var child41 = new Child4()
var child42 = new Child4()
child41.reName()
console.log(child41.name, child42.name) //[ "super4","super41" ] [ "super4" ], 子類實例不會相互影響
console.log(child41.reName === child42.reName) //true, 共享了父類的方法

ES6 class

和寄生繼承實現的效果一致

class Parent5 {
  constructor() {
    this.name = ["super5"]
  }
  reName() {
    this.name.push("new 5")
  }
}

class Child5 extends Parent5 {
  constructor() {
    super()
  }
}

var child51 = new Child5()
var child52 = new Child5()
child51.reName()
console.log(child51.name, child52.name) // [ "super5", "new 5" ], 子類實例不會相互影響
console.log(child51.reName === child52.reName) //true, 共享了父類的方法

云服務器 GPU云服務器 js繼承的幾種方式服務器請求的幾種方式 java創建對象的幾種方式 js的幾種數據類型

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91771.html

一名【合格】前端工程師的自檢清單

摘要：在他的重學前端課程中提到到現在為止，前端工程師已經成為研發體系中的重要崗位之一。大部分前端工程師的知識，其實都是來自于實踐和工作中零散的學習。一基礎前端工程師吃飯的家伙，深度廣度一樣都不能差。開篇前端開發是一個非常特殊的行業，它的歷史實際上不是很長，但是知識之繁雜，技術迭代速度之快是其他技術所不能比擬的。 winter在他的《重學前端》課程中提到：到現在為止，前端工程師已經成為研...

羅志環 2019-08-23 17:08 評論0 收藏0
一名【合格】前端工程師的自檢清單

摘要：在他的重學前端課程中提到到現在為止，前端工程師已經成為研發體系中的重要崗位之一。大部分前端工程師的知識，其實都是來自于實踐和工作中零散的學習。一基礎前端工程師吃飯的家伙，深度廣度一樣都不能差。開篇前端開發是一個非常特殊的行業，它的歷史實際上不是很長，但是知識之繁雜，技術迭代速度之快是其他技術所不能比擬的。 winter在他的《重學前端》課程中提到：到現在為止，前端工程師已經成為研發體系...

isaced 2019-05-21 19:50 評論0 收藏0
史上最全阿里 Java 面試題總結

摘要：以下為大家整理了阿里巴巴史上最全的面試題，涉及大量面試知識點和相關試題。的內存結構，和比例。多線程多線程的幾種實現方式，什么是線程安全。點擊這里有一套答案版的多線程試題。線上系統突然變得異常緩慢，你如何查找問題。以下為大家整理了阿里巴巴史上最全的 Java 面試題，涉及大量 Java 面試知識點和相關試題。 JAVA基礎 JAVA中的幾種基本數據類型是什么，各自占用多少字節。 S...

winterdawn 2019-08-19 11:02 評論0 收藏0
面試--js實現繼承的幾種方式

摘要：基于原型的繼承原型上的屬性被共享了不是我們所需要的這種繼承會有如下的缺點如果父類包含有引用類型的屬性所有的子類就會共享這個屬性。基于原型的繼承 function father() { this.faName = father; this.names=[11,22] } father.prototype.getfaName = fun...

baiy 2019-08-21 16:56 評論0 收藏0
javascript 面向對象(實現繼承的幾種方式)

摘要：老明調用了從原型中繼承來的方法繼承到了當前對象的原型中調用了從原型中擴展來的方法構造繼承基本思想借用構造函數的基本思想就是利用或者把父類中通過指定的屬性和方法復制借用到子類創建的實例中。 1、原型鏈繼承核心：將父類的實例作為子類的原型缺點：父類新增原型方法/原型屬性，子類都能訪問到，父類一變其它的都變了 function Person (name) { ...

liujs 2019-08-23 16:41 評論0 收藏0