ES6重新定义类：更简便、更强大

2023-12-22 04:33:03

ES6重新定义类：更简便、更强大

在ES5中，构造函数是创建对象的最常用方法，但也存在一些局限性，例如缺乏类变量、实例方法以及继承等特性。ES6引入了Class，使创建和使用类变得更加简单和强大。

1. 类的定义与实例化

使用Class关键字定义一个类，语法如下：

class Circle {
  constructor(radius) {
    this.radius = radius;
  }

  // 实例方法
  getArea() {
    return Math.PI * this.radius ** 2;
  }
}

// 创建一个新的Circle对象
const circle1 = new Circle(5);

2. 类变量与实例变量

类变量是属于类的变量，由类本身而不是类的实例所有。实例变量是属于类的实例的变量，由类的实例而不是类本身所有。

class Circle {
  // 类变量
  static PI = Math.PI;

  constructor(radius) {
    this.radius = radius;
  }

  // 实例变量
  getArea() {
    return Circle.PI * this.radius ** 2;
  }
}

// 访问类变量
console.log(Circle.PI); // 输出：3.141592653589793

3. 类的继承

ES6中的类支持继承，允许一个类从另一个类继承属性和方法。

class Shape {
  constructor(color) {
    this.color = color;
  }

  draw() {
    console.log(`Drawing a ${this.color} shape`);
  }
}

class Circle extends Shape {
  constructor(radius, color) {
    super(color);
    this.radius = radius;
  }

  getArea() {
    return Math.PI * this.radius ** 2;
  }
}

const circle1 = new Circle(5, "red");
circle1.draw(); // 输出：Drawing a red shape
console.log(circle1.getArea()); // 输出：78.53981633974483

4. 类的静态方法

静态方法是属于类的，而不是类的实例的，可以被类的所有实例访问。

class Circle {
  // 静态方法
  static calculateCircumference(radius) {
    return 2 * Math.PI * radius;
  }

  constructor(radius) {
    this.radius = radius;
  }

  getArea() {
    return Math.PI * this.radius ** 2;
  }
}

// 访问静态方法
console.log(Circle.calculateCircumference(5)); // 输出：31.41592653589793