Js如何模拟继承机制分别使用Es5和Es6来实现,继承

前言

继承是面向对象的特点，那么Js也可以借助prototype来模拟继承机制,以下分别使用Es5和Es6来实现继承

实现继承的目的是,实现代码的复用

Es5实现继承

如下是示例代码

// 用function模拟一个类出来,同时也作为构造函数
function Animal(name,age) {
    this.name = name; // name
    this.age = age;   // 变量age
}

Dog.prototype = new Animal();  // 把animal的所有属性和函数都继承
Dog.prototype.constructor = Dog;  // 将子类型原型的构造属性设置为子类型,修正指针对象,因为原型链继承多个实例的引用类型属性指向相同,一个实例修改了原型属性,另一个实例的原型属性也会被修改
Dog.prototype.outMsg = function() { // 重载outMsg函数
    // 实现一个outMsg方法
    alert(`我的名字是,${this.name},我的年龄是${this.age}`);
}
var dog = new Dog('小黑',4);  // 新建一个Dog对象
dog.outMsg();                 // 调用dog的outMsg()函数

以上就是使用Es5,通过原型prototype实现的继承

Es6实现继承

class Animal {
  constructor(name,age) {
      this.name = name;
      this.age = age;
  }

  outMsg() {
      alert(`我的名字是,${this.name},我的年龄是${this.age}`);
  }
}

let dog1 = new Animal("tom",4);
dog1.outMsg();


class Dog extends Animal {
  constructor(name,age) {
      super(name,age);
  }
}

let dog2 = new Dog("小黑",6);
dog2.outMsg();

在Es6中，引入了class类的概念,有一个默认的属性方法,constructor,该方法是类的构造函数，在我们通过new创建该类的实例时,会自动调用constructor函数

调用super()标识父类的构造函数,如果你写过React类组件,那对这个super会比较熟悉,接收父组件传递过来的属性,super(props)的

Es6中的类主要是解决Es5中麻烦的this以及constructor指向的改动

在Es6中直接使用extends和super()就能解决