成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JS繼承實(shí)現(xiàn)的幾種方式及其優(yōu)缺點(diǎn)

ymyang / 3466人閱讀

摘要：原型繼承缺點(diǎn)子類實(shí)例共享屬性，造成實(shí)例間的屬性會(huì)相互影響可以看到子類的實(shí)例屬性皆來(lái)自于父類的一個(gè)實(shí)例，即子類共享了同一個(gè)實(shí)例共享了父類的方法構(gòu)造函數(shù)繼承缺點(diǎn)父類的方法沒(méi)有被共享，造成內(nèi)存浪費(fèi)子實(shí)例的屬性都是相互獨(dú)立的實(shí)例方法也是獨(dú)立的，沒(méi)有

原型繼承

缺點(diǎn): 子類實(shí)例共享屬性，造成實(shí)例間的屬性會(huì)相互影響

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" ], 可以看到子類的實(shí)例屬性皆來(lái)自于父類的一個(gè)實(shí)例，即子類共享了同一個(gè)實(shí)例
console.log(child11.reName === child12.reName) // true, 共享了父類的方法
構(gòu)造函數(shù)繼承

缺點(diǎn): 父類的方法沒(méi)有被共享，造成內(nèi)存浪費(fèi)

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

var child21 = new Child2()
var child22 = new Child2()
child21.reName()
console.log(child21.name, child22.name) // [ "super1", "super111" ] [ "super1" ], 子實(shí)例的屬性都是相互獨(dú)立的
console.log(child21.reName === child22.reName) // false, 實(shí)例方法也是獨(dú)立的，沒(méi)有共享同一個(gè)方法
組合繼承

缺點(diǎn): 父類構(gòu)造函數(shù)被調(diào)用兩次,子類實(shí)例的屬性存在兩份。造成內(nèi)存浪費(fèi)

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

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

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

和寄生繼承實(shí)現(xiàn)的效果一致

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" ], 子類實(shí)例不會(huì)相互影響
console.log(child51.reName === child52.reName) //true, 共享了父類的方法

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/91771.html

相關(guān)文章

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

    摘要：在他的重學(xué)前端課程中提到到現(xiàn)在為止，前端工程師已經(jīng)成為研發(fā)體系中的重要崗位之一。大部分前端工程師的知識(shí)，其實(shí)都是來(lái)自于實(shí)踐和工作中零散的學(xué)習(xí)。一基礎(chǔ)前端工程師吃飯的家伙，深度廣度一樣都不能差。 開(kāi)篇 前端開(kāi)發(fā)是一個(gè)非常特殊的行業(yè)，它的歷史實(shí)際上不是很長(zhǎng)，但是知識(shí)之繁雜，技術(shù)迭代速度之快是其他技術(shù)所不能比擬的。 winter在他的《重學(xué)前端》課程中提到： 到現(xiàn)在為止，前端工程師已經(jīng)成為研...

    羅志環(huán) 評(píng)論0 收藏0

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

    摘要：在他的重學(xué)前端課程中提到到現(xiàn)在為止，前端工程師已經(jīng)成為研發(fā)體系中的重要崗位之一。大部分前端工程師的知識(shí)，其實(shí)都是來(lái)自于實(shí)踐和工作中零散的學(xué)習(xí)。一基礎(chǔ)前端工程師吃飯的家伙，深度廣度一樣都不能差。開(kāi)篇 前端開(kāi)發(fā)是一個(gè)非常特殊的行業(yè)，它的歷史實(shí)際上不是很長(zhǎng)，但是知識(shí)之繁雜，技術(shù)迭代速度之快是其他技術(shù)所不能比擬的。 winter在他的《重學(xué)前端》課程中提到： 到現(xiàn)在為止，前端工程師已經(jīng)成為研發(fā)體系...

    isaced 評(píng)論0 收藏0

  • 史上最全阿里 Java 面試題總結(jié)

    摘要：以下為大家整理了阿里巴巴史上最全的面試題，涉及大量面試知識(shí)點(diǎn)和相關(guān)試題。的內(nèi)存結(jié)構(gòu)，和比例。多線程多線程的幾種實(shí)現(xiàn)方式，什么是線程安全。點(diǎn)擊這里有一套答案版的多線程試題。線上系統(tǒng)突然變得異常緩慢，你如何查找問(wèn)題。 以下為大家整理了阿里巴巴史上最全的 Java 面試題，涉及大量 Java 面試知識(shí)點(diǎn)和相關(guān)試題。 JAVA基礎(chǔ) JAVA中的幾種基本數(shù)據(jù)類型是什么，各自占用多少字節(jié)。 S...

    winterdawn 評(píng)論0 收藏0

  • 面試--js實(shí)現(xiàn)繼承的幾種方式

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

    baiy 評(píng)論0 收藏0

  • javascript 面向?qū)ο?實(shí)現(xiàn)繼承的幾種方式)

    摘要：老明調(diào)用了從原型中繼承來(lái)的方法繼承到了當(dāng)前對(duì)象的原型中調(diào)用了從原型中擴(kuò)展來(lái)的方法構(gòu)造繼承基本思想借用構(gòu)造函數(shù)的基本思想就是利用或者把父類中通過(guò)指定的屬性和方法復(fù)制借用到子類創(chuàng)建的實(shí)例中。 1、原型鏈繼承 核心： 將父類的實(shí)例作為子類的原型 缺點(diǎn)： 父類新增原型方法/原型屬性，子類都能訪問(wèn)到，父類一變其它的都變了 function Person (name) { ...

    liujs 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

ymyang

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<