Thuộc tính và phương thức static của class trong Javascript

0 phút đọc

Bạn có thể gán một phương thức trực tiếp cho class mà không phải prototype. Phương thức khi đó được gọi là static.

Phương thức static

Đối với class trong JavaScript, bạn chỉ cần thêm từ khóa static trước phương thức như sau:

class User {
  static staticMethod() {
    console.log(this === User);
  }
}

User.staticMethod(); // true

Cách này hoàn toàn tương tự việc định nghĩa thuộc tính trực tiếp trong class:

class User {}

User.staticMethod = function () {
  console.log(this === User);
};

User.staticMethod(); // true

Giá trị của this trong User.staticMethod() chính là hàm khởi tạo của class User.

Thông thường, phương thức static được sử dụng để triển khai các hàm thuộc về class nói chung mà không phải ở bất kỳ một object nào.

Ví dụ, bạn có các đối tượng Article và cần một hàm để so sánh chúng. Và bạn có thể định nghĩa một phương thức static Article.compare như sau:

class Article {
  constructor(title, date) {
    this.title = title;
    this.date = date;
  }

  static compare(articleA, articleB) {
    return articleA.date - articleB.date;
  }
}

// sử dụng
let articles = [
  new Article("HTML", new Date(2019, 1, 1)),
  new Article("CSS", new Date(2019, 0, 1)),
  new Article("JavaScript", new Date(2019, 11, 1)),
];

articles.sort(Article.compare);
console.log(articles[0].title); // CSS

Trong ví dụ trên, Article.compare không thuộc bất kỳ một đối tượng article nào cả, mà thuộc về class Article.

Còn một ví dụ khác mà mọi người hay gọi là phương thức factory hay factory pattern. Tưởng tượng, bạn cần một vài cách để khởi tạo đối tượng article như:

  • Tạo article bởi các tham số truyền vào (titledate).
  • Tạo một article trống với datengày hôm nay.
  • ... hoặc một cách nào khác.

Cách đầu tiên có thể triển khai thông qua hàm khởi tạo. Với cách thứ hai, bạn có thể viết một phương thức static của class Article.

Ví dụ phương thức Artice.createTodays():

class Article {
  constructor(title, date) {
    this.title = title;
    this.date = date;
  }

  static createTodays() {
    // Chú ý: this = Article    return new this("Today's digest", new Date());  }}

    let article = Article.createTodays();
    console.log(article.title); // Today's digest
  }
}

Mỗi khi cần tạo một article cho ngày hôm nay, bạn có thể gọi Article.createTodays().

Ngoài ra, phương thức static còn được dùng trong các class liên quan đến database để thực hiện các thao tác như tìm kiếm, lưu, xóa dự liệu trong database, ví dụ:

// Xóa một article với id = 12345 trong database ứng với Article
Article.remove({ id: 12345 });

Thuộc tính static

Avatar TechMely Team
Được viết bởi

TechMely Team

Chẳng có gì trở nên dễ dàng hơn. Chỉ là bạn trở nên mạnh mẽ hơn mà thôi.
Khoá học javascript từ cơ bản đến chuyên sâuYoutube TechMely