JS 继承

作者: 一只野生前端 | 来源:发表于2020-02-26 17:35 被阅读0次
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了。这种继承方式接近于完美,也是我们最常用的组合寄生继承。

相关文章

  • Js的继承

    js的继承 @(js)[继承, js, 前端] 组合继承是原性链继承和构造函数继承的合体,它汲取了二者各自的有点,...

  • JS继承

    JS中的继承 许多OO语言都支持两种继承方式:接口继承和实现继承; 因为JS中没有类和接口的概念 , 所以JS不支...

  • #js继承

    js继承的概念 js里常用的如下两种继承方式: 原型链继承(对象间的继承)类式继承(构造函数间的继承) 类式继承是...

  • js继承遇到的小问题

    这两天在看js继承方面,它不像OC那种传统的类继承。js继承方式还是挺多的。比如:原型继承、原型冒充、复制继承 原...

  • JS中继承的实现

    JS中继承的实现 #prototype (js原型(prototype)实现继承) 全局的Function对象没有...

  • js继承

    js继承js 继承-简书 原型链实现集继承 上面的代码实现原型链继承最重要的son.prototype=new f...

  • JavaScript 10

    js继承的概念 1.通过原型链方式实现继承(对象间的继承) 2.类式继承(构造函数间的继承) 由于js不像Java...

  • JS继承的实现的几种方式

    前言 JS作为面向对象的弱类型语言,继承也是非常强大的特性之一,那么如何在JS实现继承呢? JS继承的实现方式 既...

  • 2019-03-25 继承

    js中通过原型来实现继承 组合继承:原型继承+借用构造函数继承

  • 继承方式(6种)1.7

    JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一。那么如何在JS中实现继承呢?让我们拭目以待。 JS继承...

网友评论

      本文标题:JS 继承

      本文链接:https://www.haomeiwen.com/subject/dmvbchtx.html