美文网首页
JS如何实现继承

JS如何实现继承

作者: 取个帅气的名字真好 | 来源:发表于2022-07-20 14:45 被阅读0次

使用原型链


/** 父类 */
function Animal(legsNum) {
  this.legsNum = legsNum // 腿的条数
}
Animal.prototype.kind = '动物' // 共有属性


/** 子类 */
function Dog(name) {
  this.name = name
  // 继承父类的构造属性。相当于 =>  this.legsNum = 4
  Animal.call(this, 4) 
}

// 继承父类的原型.这样会被掰掉。
// Dog.prototype.__proto__ = Animal.prototype 

// Dog 继承 Animal原型
// Dog.prototype = new Animal()
/**
 * 
 * 因为new 会
 * 1. 创建临时对象/新对象
 * 2. 绑定原型
 * 3. 指定 this = 临时对象
 * 4. 执行构造函数
 * 5. 返回临时对象
 *
 * new Animal()会【执行构造函数】也就是执行 Dog()的方法
 * Dog.prototype 会继承腿数量(legsNum)
 * 
 */

/**
 * 解决【 Dog.prototype 会继承腿数量(legsNum)】问题
 * 相当于删掉 Animal方法中的 this.legsNum = legsNum 
 */
var f = function(){}
f.prototype = Animal.prototype
Dog.prototype = new f()

Dog.prototype.kind = '狗'
Dog.prototype.say = function () {
  console.log(`汪汪~ 我是${this.name}, 我有${this.legsNum}条腿`);
}

class继承(extends、super)

class Animal {
  constructor(legsNumber) {
    this.legsNumber = legsNumber
  }
  run() { }
}

class Dog extends Animal {
  constructor(name) {
    super(4) // 继承腿数。 执行Animal中的constructor
    this.name = name
  }
  say() {
    console.log(`汪汪汪~ 我是${this.name},我有${this.legsNumber}条腿。`)
  }
}

相关文章

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

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

  • 继承方式(6种)1.7

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

  • js的继承 30

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

  • JS如何实现继承

    使用原型链 class继承(extends、super)

  • JS中继承的实现

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

  • js实现继承的几种方式

    如何实现继承? js中实现继承的方式主要是通过原型链完成的。了解原型链的相关信息可以点这里 javascript中...

  • js继承

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

  • JS继承问题

    JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一,那么,我们该如何在JS中实现继承呢? 一、公有私有属性...

  • JavaScript中的继承及实现代码

    JS虽然不像是JAVA那种强类型的语言,但也有着与JAVA类型的继承属性,那么JS中的继承是如何实现的呢? 一、构...

  • 2019-03-25 继承

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

网友评论

      本文标题:JS如何实现继承

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