前言
继承是面向对象的特点，那么Js也可以借助prototype来模拟继承机制,以下分别使用Es5和Es6来实现继承
实现继承的目的是,实现代码的复用
1
Es5实现继承
如下是示例代码
代码语言：javascript复制// 用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实现的继承
2
Es6实现继承
代码语言：javascript复制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()就能解决
分析
在最上面的用Es5继承方式中,先是定义了一个Animal类,然后又定义了一个Dog类,Dog的prototype完全使用Animal内部的属性和函数
这样Dog就继承了Animal所有的属性和函数,所以,在Dog类的构造函数里,可以访问和修改在Animal中定义的姓名和年龄
