JS如何实现继承

使用原型链


/** 父类 */
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如何实现继承)