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

# 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()函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14

以上就是使用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();