深入解析 ES6 Class 中 constructor 方法与 super 的妙用

2024-01-09 22:56:57

ES6 Class 简介

ES6 中的 class 是一种“语法糖”，它使 JavaScript 代码看起来更加像面向对象的编程语言。class 的思想与 ES5 中的函数式编程是一致的，但语法更加优雅，更易于理解。

constructor 方法

constructor 方法是类的构造函数，它是一个默认方法，会在通过 new 命令创建对象实例时自动调用。constructor 方法的作用是初始化对象的状态，即为对象的属性赋值。

构造函数的语法

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

在上面的示例中，Person 类有一个构造函数，它接收两个参数：name 和 age。在构造函数中，我们将这两个参数分别赋值给对象的 name 和 age 属性。

调用构造函数

要调用构造函数，可以使用 new 。例如：

const person = new Person('John Doe', 30);

上面的代码将创建一个新的 Person 对象，并将其存储在 person 变量中。

super

super 是一个关键字，它允许子类访问其父类的属性和方法。super 可以用于调用父类的构造函数，也可以用于访问父类的方法和属性。

调用父类的构造函数

要调用父类的构造函数，可以使用 super()。例如：

class Employee extends Person {
  constructor(name, age, jobTitle) {
    super(name, age); // 调用父类的构造函数
    this.jobTitle = jobTitle;
  }
}

在上面的示例中，Employee 类继承自 Person 类。Employee 类的构造函数首先调用父类的构造函数 Person(name, age) 来初始化 name 和 age 属性，然后为 Employee 类添加了一个新的属性 jobTitle。

访问父类的方法和属性

要访问父类的方法和属性，可以使用 super 关键字。例如：

class Employee extends Person {
  constructor(name, age, jobTitle) {
    super(name, age); // 调用父类的构造函数
    this.jobTitle = jobTitle;
  }

  greet() {
    return `Hello, my name is ${this.name} and I am a ${this.jobTitle}.`;
  }

  // 访问父类的方法
  parentGreet() {
    return super.greet(); // 调用父类的方法
  }
}