1. 前言

1. 之前没有研究那么细,这次往里扒拉扒拉

2. ES5的继承时通过prototype或构造函数机制来实现。

1. ES5的继承实质上是先创建子类的实例对象，
   然后再将父类的方法添加到this上（Parent.apply(this)）

• 它的主要特点包括：

1. 原型链继承：使用 prototype 属性实现对象间的继承关系。子类的原型对象通过 Object.create() 方法创建，并将父类的实例作为子类原型对象的原型。
2. 构造函数调用：子类通过调用父类的构造函数来继承父类的属性和方法，并使用 call() 或 apply() 方法设置正确的上下文。
3. 原型属性和方法继承：子类通过原型链继承父类的原型属性和方法。
4. 无法传递参数：无法在子类的构造函数中直接传递参数给父类构造函数。

3. ES6的继承机制完全不同

1. 实质上是先创建父类的实例对象this（所以必须先调用父类的super()方法），
   然后再用子类的构造函数修改this

• 它的主要特点包括：

1. class 和 extends：使用 class 关键字定义类，使用 extends 关键字实现类之间的继承关系。
2. super关键字：子类使用 super 关键字来调用父类的构造函数，可以传递参数给父类构造函数。
3. 原型方法的继承：子类会自动继承父类的原型方法，不需要手动设置原型链。
4. 静态方法的继承：子类可以继承父类的静态方法。
5. constructor方法：子类可以定义自己的 constructor 方法，并在其中调用 super 方法来执行父类的构造函数。
6. class语法糖：ES6 的继承使用 class 和 extends 语法，使得代码更易读、易理解，更符合面向对象编程的语法习惯

4. 总结

1. ES6 的继承相比于 ES5 的原型链继承更加直观、易用，
2. 语法更清晰，支持传递参数给父类构造函数，
3. 并且不需要手动设置原型链。
4. 它提供了更接近传统面向对象编程的继承方式，并且更易于理解和维护

5.  es5 继承 demo

// 父类
function Animal(name) {
  this.name = name;
}
Animal.prototype.sayHello = function() {
  console.log('Hello, I am ' + this.name);
};
// 子类
function Dog(name, breed) {
  Animal.call(this, name);
  this.breed = breed;
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.bark = function() {
  console.log('Woof!');
};
// 使用示例
var dog = new Dog('Max', 'Labrador');
dog.sayHello(); // 输出: Hello, I am Max
dog.bark(); // 输出: Woof!

6. es6 继承 demo

// 父类
class Animal {
  constructor(name) {
    this.name = name;
  }
  sayHello() {
    console.log('Hello, I am ' + this.name);
  }
}
// 子类
class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }
  bark() {
    console.log('Woof!');
  }
}
// 使用示例
const dog = new Dog('Max', 'Labrador');
dog.sayHello(); // 输出: Hello, I am Max
dog.bark(); // 输出: Woof!

参考资料

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉