ES5和ES6继承的差别：Babel会告诉你

2023-09-12 19:35:16

ES5 与 ES6 的继承：彻底解析差异

在面向对象的编程中，继承是一个关键概念，它允许我们创建新类，这些新类继承并扩展自现有类。ES5 和 ES6（JavaScript 的两个主要版本）都支持继承，但它们的实现方式有所不同。

ES5 的原型继承

ES5 采用原型继承机制。每个函数都有一个原型对象，该对象存储着该函数创建的所有对象的属性和方法。当我们创建新对象时，该对象将继承其构造函数的原型中的属性和方法。

// 定义 Person 类
function Person(name) {
  this.name = name;
}

// 为 Person 类添加 greet 方法
Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}.`);
};

// 定义 Student 类，继承自 Person 类
function Student(name, major) {
  Person.call(this, name); // 调用 Person 构造函数
  this.major = major;
}

// 设置 Student 类的原型为 Person 类的原型副本
Student.prototype = Object.create(Person.prototype);

// 修改 Student 类的 constructor 属性
Student.prototype.constructor = Student;

// 创建 Student 对象
const student = new Student('John', 'Computer Science');

// 调用 greet 方法
student.greet(); // 输出：Hello, my name is John.

ES6 的类继承

ES6 引入了 class ，提供了一种更显式和简洁的继承机制。类定义存储在原型对象中，但语法更直观。

// 定义 Person 类
class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

// 定义 Student 类，继承自 Person 类
class Student extends Person {
  constructor(name, major) {
    super(name); // 调用 Person 构造函数
    this.major = major;
  }
}

// 创建 Student 对象
const student = new Student('John', 'Computer Science');

// 调用 greet 方法
student.greet(); // 输出：Hello, my name is John.