JS 继承

bb刀

JS的六种继承方式

1.借助call / apply
// 父函数
function P(){
  this.arr = [1,2,3]
}

// 子函数
function C(){
  P.call(this)
}

缺点:这种继承方式子类可以继承父类的属性值,但是子类是无法继承父类存在的原型链上的方法。所以可以引出借助原型链的方式。

2.借助原型链

function P(){
  this.arr = [1,2,3]
}

function C(){
}

C.prototype = new P()
console.log(C)

var c = new C()
var c2 =new C()
c.arr.push(4)

console.log(c.arr,c2.arr)  / / [1,2,3,4] , [1,2,3,4]

缺点:通过打印我们可以看到2个实例的arr都发生了改变,那为什么会改变了?因为2个实例指向的是同一个原型对象。
那么还有更好的方式吗?

3.将前两种方式组合

function P(){
  this.arr = [1,2,3]
}

function C(){
  P.call(this)
}

C.prototype = new P()
console.log(C)

var c = new C()
var c2 =new C()
c.arr.push(4)

console.log(c.arr,c2.arr)  / / [1,2,3,4] , [1,2,3]

通过控制台可以看到原先的问题解决了,但是又出现一个新的问题,P的构造函数会多执行一次,那么我们怎么去优化它呢?

4.组合继承优化1

function P(){
  this.arr = [1,2,3]
}

function C(){
  P.call(this)
}

C.prototype = P.prototype

var c = new C()
console.log(c)  // P

什么?c的构造函数竟然是P,显然这不是我们想看到的,结果应该是C。

5.组合继承优化2

function P(){
  this.arr = [1,2,3]
}

function C(){
  P.call(this)
}

C.prototype = Object.create(P.prototype)
C.prototype.constructor = C
var c = new C()
console.log(c)  // C

打印结果,构造函数指回到C了。这种继承方式接近于完美,也是我们最常用的组合寄生继承。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 继承的概念:子类可以使用父类共享的属性和方法,避免重复代码提高代码复用性。 原型链:子类可以共享父类的实例对象和实...
    浅秋_6672阅读 3,085评论 0 0
  • 一、原型链 学过java的同学应该都知道,继承是java的重要特点之一,许多面向对象的语言都支持两种继承方式:接口...
    grain先森阅读 5,248评论 0 39
  • 原文链接 js的继承有6种方式,大致总结一下它们各自的优缺点,以及它们之间的关系。 1.原型链 js的继承机制不同...
    空_城__阅读 4,151评论 0 11
  • 继承6种套餐 参照红皮书,JS继承一共6种 1.原型链继承 核心思想:子类的原型指向父类的一个实例 Son.pro...
    灯不梨喵阅读 8,366评论 1 2
  • 说实在话,以前我只需要知道“寄生组合继承”是最好的,有个祖传代码模版用就行。最近因为一些事情,几个星期以来一直心心...
    grain先森阅读 2,600评论 0 2

友情链接更多精彩内容