ES5的继承和ES6的继承有什么区别
2023-06-30 本文已影响0人
云高风轻
1. 前言
- 之前没有研究那么细,这次往里扒拉扒拉
2. ES5的继承时通过prototype或构造函数机制来实现。
- ES5的继承实质上是先创建子类的实例对象，
然后再将父类的方法添加到this上（Parent.apply(this)）
- 它的主要特点包括：
- 原型链继承：使用 prototype 属性实现对象间的继承关系。子类的原型对象通过 Object.create() 方法创建，并将父类的实例作为子类原型对象的原型。
- 构造函数调用：子类通过调用父类的构造函数来继承父类的属性和方法，并使用 call() 或 apply() 方法设置正确的上下文。
- 原型属性和方法继承：子类通过原型链继承父类的原型属性和方法。
- 无法传递参数：无法在子类的构造函数中直接传递参数给父类构造函数。
3. ES6的继承机制完全不同
- 实质上是先创建父类的实例对象this（所以必须先调用父类的super()方法），
然后再用子类的构造函数修改this
- 它的主要特点包括：
class和extends：使用 class 关键字定义类，使用 extends 关键字实现类之间的继承关系。
super关键字：子类使用 super 关键字来调用父类的构造函数，可以传递参数给父类构造函数。
原型方法的继承：子类会自动继承父类的原型方法，不需要手动设置原型链。
静态方法的继承：子类可以继承父类的静态方法。
constructor方法：子类可以定义自己的 constructor 方法，并在其中调用 super 方法来执行父类的构造函数。
class语法糖：ES6 的继承使用 class 和 extends 语法，使得代码更易读、易理解，更符合面向对象编程的语法习惯
4. 总结
- ES6 的继承相比于 ES5 的原型链继承更加直观、易用，
- 语法更清晰，支持传递参数给父类构造函数，
- 并且不需要手动设置原型链。
- 它提供了更接近传统面向对象编程的继承方式，并且更易于理解和维护
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!
