ES6 中的 Constructor 构造器解析

在 JavaScript 中，构造函数是创建新对象的一种特殊函数。在 ES5 中，我们可以使用函数（Function）或对象（Object）来创建构造函数以及对象，然而，ES6 为了解决这个问题，引入了 Constructor 构造器。

Constructor 构造器

Constructor 构造器是 ES6 中一种新的用于创建类的方法。它允许我们使用 class 关键字声明一个类，并且定义一个构造函数来初始化这个类的实例对象。

// javascriptcn.com 代码示例
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

const alice = new Person('Alice', 20);
console.log(alice.name); // Alice
console.log(alice.age); // 20

在上面的代码中，我们定义了一个名为 Person 的类，它包含一个构造函数来初始化 name 和 age 属性，并使用 new 关键字实例化了一个名为 alice 的 Person 对象。

除了定义一个构造函数之外，我们还可以在类中定义其他函数，它们会成为类的原型方法：

// javascriptcn.com 代码示例
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}

const alice = new Person('Alice', 20);
alice.sayHello(); // Hello, my name is Alice and I'm 20 years old.

在上面的代码中，我们向 Person 类中添加了一个名为 sayHello 的函数作为原型方法，它可以被 alice 对象调用。

继承

在 ES6 中，我们可以使用 extends 关键字来创建子类，并且使用 super 关键字来调用父类的构造函数。

// javascriptcn.com 代码示例
class Animal {
  constructor(name) {
    this.name = name;
  }

  sayName() {
    console.log(`My name is ${this.name}.`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  sayBreed() {
    console.log(`My breed is ${this.breed}.`);
  }
}

const fido = new Dog('Fido', 'Golden Retriever');
fido.sayName(); // My name is Fido.
fido.sayBreed(); // My breed is Golden Retriever.

在上面的代码中，我们定义了一个 Animal 类，它包含一个构造函数和一个 sayName 方法。然后我们创建了一个名为 Dog 的子类，它继承自 Animal 类，并添加了一个构造函数和一个 sayBreed 方法。

在 Dog 类的构造函数中，我们通过调用 super(name) 来调用父类 Animal 的构造函数，并将 name 参数传递给它。这样，我们就可以在子类中初始化父类的属性了。

总结

在本文中，我们学习了 ES6 中的 Constructor 构造器，它使得创建类更加方便和直观。我们也学习了如何在类中定义构造函数和原型方法，以及如何通过继承来创建子类。Constructor 构造器为我们提供了一种更加舒适的方式来创建类。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6536402a7d4982a6ebe3921a