ES6 中 Class 的继承和构造函数详解-JavaScript中文网-JavaScript教程资源分享门户

ES6 中引入了 Class 这个新的语法特性，使得 JavaScript 的面向对象编程更加直观和易用。在 Class 中，继承和构造函数是两个非常重要的概念，本文将详细介绍它们的使用方法和注意事项。

继承

继承是面向对象编程中的一个基本概念，它允许子类继承父类的属性和方法，并且可以在此基础上添加新的属性和方法。在 ES6 中，我们可以通过 extends 关键字来实现类的继承。

// javascriptcn.com 代码示例
class Animal {
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

let d = new Dog('Mitzie');
d.speak(); // Mitzie barks.

在上面的例子中，我们定义了一个 Animal 类和一个 Dog 类，Dog 类继承自 Animal 类。Dog 类重写了 speak 方法，使得 Dog 实例调用 speak 方法时输出 barks 而不是 makes a noise。我们通过 new 关键字创建了一个 Dog 类的实例 d，并调用了它的 speak 方法。

需要注意的是，子类在构造函数中必须调用 super 函数，以便在创建子类实例时先创建父类实例。如果没有调用 super 函数，子类将无法访问父类的属性和方法。

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

class Dog extends Animal {
  constructor(name, breed) {
    // 必须调用 super 函数
    super(name);
    this.breed = breed;
  }
  
  speak() {
    console.log(`${this.name} barks.`);
  }
}

let d = new Dog('Mitzie', 'Poodle');
console.log(d.name); // Mitzie
console.log(d.breed); // Poodle

在上面的例子中，我们定义了一个 Dog 类，它有两个参数 name 和 breed。在 Dog 类的构造函数中，我们调用了 super 函数来调用父类的构造函数，并将 name 参数传递给它。然后，我们将 breed 参数赋值给 Dog 类的实例属性 breed。最后，我们创建了一个 Dog 类的实例 d，并访问了它的 name 和 breed 属性。

构造函数

在 ES6 中，我们可以通过 constructor 方法来定义类的构造函数。构造函数在类实例化时自动调用，并且可以在其中初始化类的属性和方法。

// javascriptcn.com 代码示例
class Animal {
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

let a = new Animal('Fido');
a.speak(); // Fido makes a noise.

在上面的例子中，我们定义了一个 Animal 类，并在其中定义了一个构造函数。构造函数接受一个 name 参数，并将其赋值给 Animal 类的实例属性 name。然后，我们创建了一个 Animal 类的实例 a，并调用了它的 speak 方法。

需要注意的是，在类的构造函数中，我们不应该使用 function 关键字来定义方法，而应该直接使用方法名和函数体。否则，会出现语法错误。

// javascriptcn.com 代码示例
class Animal {
  constructor(name) {
    this.name = name;
  }
  
  // 错误的写法
  speak: function() {
    console.log(`${this.name} makes a noise.`);
  }
  
  // 正确的写法
  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

在上面的例子中，我们定义了一个 Animal 类，并在其中定义了一个 speak 方法。在错误的写法中，我们使用了 function 关键字来定义 speak 方法，导致语法错误。在正确的写法中，我们直接使用了方法名和函数体来定义 speak 方法。

总结

在本文中，我们详细介绍了 ES6 中 Class 的继承和构造函数的使用方法和注意事项。通过学习本文，我们可以更加深入地理解面向对象编程的基本概念，并且能够更加灵活地使用 JavaScript 进行编程。

完整示例代码如下：

// javascriptcn.com 代码示例
class Animal {
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }
  
  speak() {
    console.log(`${this.name} barks.`);
  }
}

let a = new Animal('Fido');
a.speak(); // Fido makes a noise.

let d = new Dog('Mitzie', 'Poodle');
console.log(d.name); // Mitzie
console.log(d.breed); // Poodle
d.speak(); // Mitzie barks.

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