2021-08-17

ES5和ES6继承详情展示

关于ES5和ES6的继承做出本人的理解，如有问题，也请指出，大家共同成长。

ES5的继承

ES5有两种继承方式。 一种是经典继承 一种是原型链继承

1. 一种是经典继承 ；
2. 一种是原型链继承 。

经典继承

1，先写个构造函数 function Animal(){

      }

,2，再写一个构造函数 function Dog（）{
Animal.call()
}
3，这里我们想让dog继承animal里面的一些东西。
这时候我们通过经典继承怎么实现？
我们这dog内部调用animal构造函数。阿计入animal.call（）更改指向
这时，在dog内部就可以访问animal的一些属性和方法了。如，上函数中加入 Animal.call()。

原型链继承

1，以这个例子来说，Dog.prototype =new Animal()。,这里的子构造函数是Dog,new Animal生成了Animal的实例，这时dog.prototype指向animal的实例。这两个是es5中的继承实例。子构造函数的实例。子构造函数的原型指向父构造函数的实例。

ES6的继承

ES6的继承会有两个线，这两个线同时存在。一个是子类继承父类，另一个是子类原型对象继承父类原型对象。

子类继承父类
1，如何理解子类继承父类？
子类的构造函数继承父类的继承函数。
2， 如何理解子类原型对象继承父类原型对象？
Dog.__proto === Animal.prototype.
这时我们打开vscode，编写一个js文件来具体说明。

class Animal {
// 定义静态属性
static animalcolor=‘white’
// 这里为了显示继承，我们在color前加个animal，便于观察
constructor(name, age) {
// constructor是一个构造器，里面可以执行各种方法。
this.name = name
this.age = age
console.log(‘这是Animal实例属性’);
// 做完这一步，我们在定义一个静态属性
}
//静态方法
static animalFun(){
console.log(‘Animal的静态方法’)
}

// 实例方法
animalFun1(){
    console.log('animal的实例方法')
    // 三个属性方法，分离开来
}

}

// 这三个都是父类的，下面我们写子类的
class Dog extends Animal {
constructor(name, age, weight) {
// 既然要继承animal，这里要用super，把当前的name和age导入
super(name, age)
this.weight = weight
console.log(‘Dog的构造器’);
// 这里也可以理解成dog的静态属性
}
}
//实例化对象
let dog = new Dog(‘阿毛’, 1, 30);
// 这是dog的实例属性出现了
console.log(dog);
// 这里我在打印时，输入了’dog’这样就不是实例了。

 2，然后在集成终端打开，输入node    文件名.js

这里想说的是我在consol.log实例化中时，不应该是输入’dog’，这样的话，就不是实例的引用了。

图形展示ES6继承的关系