class

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

Khai báo class tạo một binding của class mới với tên đã cho.

Bạn cũng có thể định nghĩa class bằng cách sử dụng biểu thức class.

Try it

class Polygon {
  constructor(height, width) {
    this.area = height * width;
  }
}

console.log(new Polygon(4, 3).area);
// Expected output: 12

Cú pháp

js
class name {
  // class body
}
class name extends otherName {
  // class body
}

Mô tả

Thân class của một khai báo class được thực thi trong chế độ strict. Khai báo class rất giống với let:

  • Khai báo class có phạm vi trong cả block lẫn hàm.
  • Khai báo class chỉ có thể được truy cập sau khi đạt đến vị trí khai báo (xem temporal dead zone). Vì lý do này, khai báo class thường được coi là không được hoisted (khác với khai báo hàm).
  • Khai báo class không tạo thuộc tính trên globalThis khi được khai báo ở cấp cao nhất của một script (khác với khai báo hàm).
  • Khai báo class không thể được khai báo lại bởi bất kỳ khai báo nào khác trong cùng phạm vi.

Bên ngoài thân class, khai báo class có thể được gán lại như let, nhưng bạn nên tránh làm vậy. Bên trong thân class, binding là hằng số như const.

js
class Foo {
  static {
    Foo = 1; // TypeError: Assignment to constant variable.
  }
}

class Foo2 {
  bar = (Foo2 = 1); // TypeError: Assignment to constant variable.
}

class Foo3 {}
Foo3 = 1;
console.log(Foo3); // 1

Ví dụ

Khai báo class

Trong ví dụ sau, trước tiên chúng ta định nghĩa một class có tên Rectangle, sau đó mở rộng nó để tạo một class có tên FilledRectangle.

Lưu ý rằng super(), được sử dụng trong constructor, chỉ có thể được dùng trong các constructor, và bắt buộc phải được gọi trước khi từ khóa this có thể được sử dụng.

js
class Rectangle {
  constructor(height, width) {
    this.name = "Rectangle";
    this.height = height;
    this.width = width;
  }
}

class FilledRectangle extends Rectangle {
  constructor(height, width, color) {
    super(height, width);
    this.name = "Filled rectangle";
    this.color = color;
  }
}

Thông số kỹ thuật

Specification
ECMAScript® 2027 Language Specification
# sec-class-definitions

Tương thích trình duyệt

Xem thêm