在 ES6/ES2015 中使用类-JavaScript中文网-JavaScript教程资源分享门户

在 ES6/ES2015 中引入了类(class)，这为 JavaScript 开发中的面向对象编程(OOP)提供了更为直观和易用的方式。在本文中，我们将讨论类的概念、用法和示例。

类的概念

类是一种模板或蓝图，它描述了一组属性和方法，用于创建特定类型的对象。类是对象的抽象，而对象是类的实例。

类通过关键字 class 定义，其中包含了构造函数(constructor)、类方法(class method)、实例方法(instance method)、getter 和 setter 以及静态方法(static method)。

类的用法

类的创建

创建一个类的基本语法为：

// javascriptcn.com 代码示例
class 类名 {
  constructor(参数1, 参数2, ……, 参数n) {
    // 构造函数
  }
  类方法1() {
    // 类方法1
  }
  类方法2() {
    // 类方法2
  }
  ⋯⋯
}

新建一个类通常需要定义一个构造函数，使用 constructor 关键字来定义，它是类的默认方法，在使用 new 操作符时自动调用。

// javascriptcn.com 代码示例
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  sayHello() {
    console.log(`Hello, ${this.name}.`);
  }
}

let p = new Person('Lucy', 18);
p.sayHello(); // Hello, Lucy.

使用 new 操作符来实例化一个类，它将返回一个新的对象，具有类的属性和方法。在实例化过程中，构造函数会被调用并将参数传递给它，以初始化新对象的属性。

类的继承

类的继承和其他语言中的继承很相似，通过关键字 extends 来实现。子类可以访问父类的所有属性和方法。

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

  sayHello() {
    console.log(`Hello, I am ${this.name}.`);
  }
}

class Cat extends Animal {
  constructor(name, color) {
    super(name);
    this.color = color;
  }

  sayMeow() {
    console.log(`Meow, I am a ${this.color} cat.`);
  }
}

let c = new Cat('TinTin', 'black');
c.sayHello(); // Hello, I am TinTin.
c.sayMeow(); // Meow, I am a black cat.

在子类中引用父类的方法需要使用 super 关键字，可以在子类的方法中调用父类的方法。

类的 getter 和 setter

ES6 中引入了 getter 和 setter，用于取值(get)和赋值(set)操作，分别使用 get 和 set 关键字来定义。

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

  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }

  set fullName(value) {
    [this.firstName, this.lastName] = value.split(' ');
  }
}

let p = new Person('Harry', 'Potter');
console.log(p.fullName); // Harry Potter
p.fullName = 'Hermione Granger';
console.log(p.fullName); // Hermione Granger

在上面的示例中，我们定义了一个 Person 类，其中 fullName 是类的一个属性。使用 get 方法，我们可以从 fullName 中获取 firstName 和 lastName 的值，使用 set 方法，我们可以从 fullName 中设置 firstName 和 lastName 的值。

类的静态方法

静态方法是类本身(而不是类的实例)的方法。可以在类的内部使用 static 关键字定义。

class MathUtils {
  static sum(...numbers) {
    return numbers.reduce((sum, n) => sum + n, 0);
  }
}

console.log(MathUtils.sum(1, 2, 3, 4)); // 10

在上面示例中，我们定义了一个 MathUtils 类，并在其中定义了一个静态方法 sum，该方法将返回所有输入数字的总和。这个方法不需要通过实例化对象的方式来调用，而是通过类名来调用。

总结

ES6 中引入了类的概念，提高了 JavaScript 的面向对象编程的直观性和易用性。在本文中，我们介绍了类的基本概念、用法和示例。在编写又大又复杂的程序时，类使代码更整洁、更易于管理。通过ES6的类，我们可以轻松创建高效的、易于维护的代码。

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