从Class与Extends看ES6 OOP的精髓

2023-10-05 22:51:07

ES6中，class和extends的引入，标志着JavaScript语言正式支持了面向对象编程。本文将从源码的角度，对class和extends这两个关键字进行深入分析，并将其与ES5的寄生组合继承进行对比，帮助您更深入地理解ES6的面向对象编程。

ES6 Class 与 Extends 源码分析

class Person {
  constructor(name) {
    this.name = name;
  }

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

class Student extends Person {
  constructor(name, major) {
    super(name);
    this.major = major;
  }

  study() {
    console.log(`${this.name} is studying ${this.major}.`);
  }
}

const person = new Person('John');
person.greet(); // Hello, my name is John.

const student = new Student('Mary', 'Computer Science');
student.greet(); // Hello, my name is Mary.
student.study(); // Mary is studying Computer Science.

class

语法：

class <class-name> {
  constructor() {
    // Constructor code
  }

  // Class methods
}

构造函数：

类通过constructor()方法进行初始化，构造函数会在创建类的新实例时被调用。
方法：

类的方法定义在constructor()方法之外，可以使用this关键字访问类中的属性和方法。

extends

语法：

class <derived-class-name> extends <base-class-name> {
  constructor() {
    // Constructor code
  }

  // Class methods
}

继承：

extends关键字用于定义子类，子类继承了父类中的所有属性和方法。
构造函数：

子类的构造函数必须调用父类的构造函数，可以使用super()关键字来实现。
方法：

子类可以覆写父类中的方法，也可以定义自己的新方法。

ES6 Class Extends 与 ES5 寄生组合继承的区别

ES6的class和extends关键字与ES5的寄生组合继承相比，具有以下几个主要区别：

语法更简洁：

ES6的class和extends关键字的语法更加简洁，易于理解和使用。
继承更简单：

ES6的class和extends关键字实现了更简单的继承机制，子类可以直接继承父类中的所有属性和方法，而无需使用寄生组合继承中的中间函数。
更符合面向对象编程的原则：

ES6的class和extends关键字更加符合面向对象编程的原则，使JavaScript的OOP编程更加自然和直观。