js中类的继承-超详细

1、es5的继承：

• 原型链继承：Dog.prototype=new Animal()
• 构造函数继承：Animal.call(this)
• 组合继承：
  • 实例属性继承：构造函数继承
  • 方法继承：原型继承

2、es6继承：class+extends+super

• 继承父实例属性：写在父的constructor中，子使用super访问
• 继承父实例方法：写在父类体中，子实例对象.方法名
• 继承静态方法、静态属性：使用static声明，子构造函数.静态方法名/静态属性名

思路：虽然es6中没有原型链的概念，但当我们调用时也会优先自身寻找，找不到时才去父类寻找。

注意：继承父类的实例属性时，一定要显示调用super

class Animal {
  constructor(name, age, weight) {
    console.log('父类构造器');
    this.name = name
    this.age = age
    this.weight = weight
  }
  sayName() {
    console.log(this.name);
  }
  static animalAttr = '父类静态属性'
  static animalMethod(d) {
    return d instanceof Animal
  }
}

// 继承 1、extends关键字继承 显示调用super()
class Dog extends Animal {
  constructor(name, age, weight, type) {
    // 2、super类似于 Animal.call(this)  继承父的实例属性
    super(name, age, weight) // 
    console.log('子类构造器');
    this.type = type
  }
  // 6、当子类存在与父类相同时，优先执行子类
  // sayName() {
  //   console.log('子类的sayName');
  // }
}
let d1 = new Dog('可乐', 12, '10kg', '金毛')
// console.log(d1); //Dog { name: '可乐', age: 12, weight: '10kg', type: '金毛' }
// 3、继承类体方法
d1.sayName() //可乐
// 4、继承静态属性
console.log(Dog.animalAttr); //父类静态属性
// 5、继承静态方法
console.log(Dog.animalMethod(d1)); //true