必须掌握的 ES6 中的 Class 语法

在 ES6 中，我们可以用 class 声明一个类，而不仅仅是用构造函数来表示一个类。这种语法的增强为我们提供了更加优美的语法来表示一个对象的结构，它也大幅度地增强了面向对象编程的能力。

class 的语法

class 的语法非常简单，与其他高级语言的语法相似。以下是一个示例：

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

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

在上述示例中，我们声明了一个 Animal 类，它有一个名为 constructor 的方法来初始化实例属性。我们也定义了一个方法 sayName 来在控制台输出 this.name。

继承

我们也可以使用 extends 关键字来继承一个类。以下是一个示例:

class Dog extends Animal {
  bark() {
    console.log('Woof!');
  }
}

在上述示例中，我们声明了一个 Dog 类继承了 Animal 类。 Dog 类还定义了一个方法 bark()。

super()

在子类的构造函数中，我们必须先调用 super 函数来调用父类的构造函数来初始化它的属性。以下是一个示例：

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

  bark() {
    console.log('Woof!');
  }
}

在这个例子中，我们声明了一个名为 Dog 的类，它的构造函数接受了两个参数。我们还在这个构造函数中调用了 super(name)，来初始化 Animal 类的 name 属性。

类和模块

在 ES6 中，每个模块都是一个独立的文件，因此它们具有单独的作用域。当我们声明一个类时，它只存在于当前的模块中。以下是一个示例：

// dog.js
class Animal {
  constructor(name) {
    this.name = name;
  }

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

export default Animal;

// index.js
import Animal from './dog';

class Dog extends Animal {
  bark() {
    console.log('Woof!');
  }
}

const dog = new Dog('Fido');
dog.sayName();
dog.bark();

在这个例子中，我们声明了一个 Animal 类，并在 dog.js 中导出它。在 index.js 中，我们导入了 Animal 类并将它用于子类 Dog 类。我们还创建了一个实例 dog，并调用了它的 sayName() 和 bark() 方法。

总结

在本文中，我们学习了 ES6 中的类语法，以及它如何更好地实现面向对象编程。我们学习了用 class 来声明类和使用 extends 来继承。我们还学习了 super() 的使用，以及如何将类与模块结合使用。了解这些语法是每个前端开发人员必须掌握的技能之一。

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