Static trong JavaScript: phương thức và thuộc tính static

Thành viên static thuộc về lớp, không thuộc về instance

Phần lớn phương thức bạn viết trong lớp (class) làm việc trên một instance cụ thể: một user nào đó, một circle nào đó. Thành viên static thì khác. Chúng thuộc về chính lớp. Bạn gọi chúng trên tên lớp, không phải trên instance.

class MathUtils {
    static double(n) {
        return n * 2;
    }
}

console.log(MathUtils.double(21));

const m = new MathUtils();
// console.log(m.double(21));  // TypeError: m.double is not a function

double nằm trên MathUtils, không nằm trên các instance của nó. Tạo instance cũng chẳng giúp gì: m.double là undefined. Điều này ngược với phương thức thường, vốn nằm trên instance (chính xác là trên prototype) và lớp không nhìn thấy chúng.

Mô hình tư duy: từ khóa class tạo ra hai thứ, một nhóm phương thức instance (dùng qua new MathUtils()) và một nhóm phương thức static (dùng trực tiếp qua MathUtils). Từ khóa static quyết định một thành viên rơi vào nhóm nào.

Cách dùng kinh điển: phương thức factory

Lý do phổ biến nhất để viết phương thức static là tạo một hàm khởi tạo thay thế. constructor thật nhận những đối số của riêng nó, nhưng bạn thường muốn có thêm cách khác để tạo đối tượng: từ JSON, từ một hàng trong cơ sở dữ liệu, từ một URL.

class User {
    constructor(name, email) {
        this.name = name;
        this.email = email;
    }

    static fromJSON(json) {
        const data = JSON.parse(json);
        return new User(data.name, data.email);
    }
}

const ada = User.fromJSON('{"name":"Ada","email":"ada@example.com"}');
console.log(ada.name, ada.email);

fromJSON không dùng một user mà tạo ra một user. Đó chính xác là lúc phương thức static phù hợp. Cách khác là một hàm parseUser đứng riêng, nhưng đặt nó trong lớp giúp gom các hành vi liên quan lại với nhau và làm rõ ý định ngay tại chỗ gọi.

Thuộc tính static

Bạn cũng có thể gắn dữ liệu vào chính lớp:

class Circle {
    static PI = 3.14159;

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

    area() {
        return Circle.PI * this.radius ** 2;
    }
}

console.log(Circle.PI);
console.log(new Circle(5).area());

Circle.PI được mọi hình tròn dùng chung: đó là hằng số trên lớp, không được sao chép vào từng instance. Bên trong phương thức instance, bạn tham chiếu nó qua tên lớp (Circle.PI), không phải qua this.

Thuộc tính static rất tiện cho cấu hình, bộ nhớ đệm dùng chung giữa các instance, bộ đếm và hằng số cấp lớp.

this bên trong phương thức static là lớp

Bên trong phương thức thường, this là instance. Bên trong phương thức static, this là lớp:

class Counter {
    static count = 0;

    static increment() {
        this.count += 1;
        return this.count;
    }
}

console.log(Counter.increment());
console.log(Counter.increment());
console.log(Counter.count);

this.count bên trong increment nghĩa là Counter.count. Thoạt đầu có thể thấy lạ, nhưng đây là điều giúp kế thừa phương thức static hoạt động: this trỏ tới lớp mà bạn gọi phương thức trên đó, không phải lớp đã định nghĩa nó.

Phương thức static và kế thừa

Phương thức static được lớp con kế thừa. Và vì this trỏ tới lớp mà phương thức được gọi trên đó, phương thức factory tự động tạo ra đúng lớp con:

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

    static create(name) {
        return new this(name);
    }
}

class Dog extends Animal {
    bark() {
        return `${this.name} says woof`;
    }
}

const d = Dog.create("Rex");
console.log(d instanceof Dog);
console.log(d.bark());

Animal.create dùng new this(name). Khi bạn gọi Dog.create("Rex"), this là Dog, nên new this(name) tạo ra một Dog. Nếu viết new Animal(name) ở đó thì lúc nào cũng tạo ra Animal, làm hỏng mẫu này. Đây là lý do chính khiến this trong phương thức static trỏ tới lớp.

Static và instance: so sánh qua ví dụ

Đây là cùng một loại logic, chia theo hai phong cách:

class Temperature {
    constructor(celsius) {
        this.celsius = celsius;
    }

    // Instance method: needs a specific temperature.
    toFahrenheit() {
        return this.celsius * 9 / 5 + 32;
    }

    // Static method: pure conversion, no instance needed.
    static celsiusToFahrenheit(c) {
        return c * 9 / 5 + 32;
    }
}

const t = new Temperature(100);
console.log(t.toFahrenheit());
console.log(Temperature.celsiusToFahrenheit(100));

Cả hai làm cùng một phép tính. Phiên bản instance đọc dữ liệu từ this.celsius. Phiên bản static nhận đầu vào qua đối số. Chọn phương thức instance khi thao tác là "việc mà đối tượng này làm"; chọn phương thức static khi đó là "thứ lớp này biết cách tính, khi được cho đầu vào".

Khối static để khởi tạo

Đôi khi việc khởi tạo một thuộc tính static cần nhiều hơn một biểu thức: một vòng lặp, một điều kiện, nhiều giá trị phụ thuộc nhau. Đó là việc của khối static:

class Config {
    static values = {};

    static {
        const env = "production";
        this.values.env = env;
        this.values.debug = env !== "production";
        this.values.apiUrl = env === "production"
            ? "https://api.example.com"
            : "http://localhost:3000";
    }
}

console.log(Config.values);

Khối static { ... } chạy một lần, khi lớp được định nghĩa. Bên trong nó, this là lớp. Dùng nó cho việc khởi tạo nhiều bước; với một phép gán đơn lẻ, một trường static thông thường rõ ràng hơn.

Thành viên static private

Trường static cũng có thể là private, bằng tiền tố #. Chúng chỉ truy cập được từ bên trong lớp:

class IdGenerator {
    static #nextId = 1;

    static next() {
        return IdGenerator.#nextId++;
    }
}

console.log(IdGenerator.next());
console.log(IdGenerator.next());
// console.log(IdGenerator.#nextId);  // SyntaxError

#nextId được niêm phong bên trong lớp. Code bên ngoài gọi được IdGenerator.next() nhưng không chạm vào hay đặt lại bộ đếm được. Private field sẽ có trang riêng ngay sau đây, nhưng bạn nên biết rằng kết hợp static với # là hoạt động được.

Khi nào không nên dùng static

Phương thức static là cách hay để gom các hàm trợ giúp, nhưng đó không phải lý do để biến mọi tiện ích thành lớp. Nếu bạn có một tệp đầy các hàm độc lập, hãy export các hàm đó, đừng bọc chúng trong một lớp toàn phương thức static chỉ để tạo không gian tên. Module đã làm việc đó rồi, và làm gọn gàng hơn.

Hãy dùng static khi:

• Hàm thực sự thuộc về một lớp (factory, bộ chuyển đổi, bộ kiểm tra cho kiểu đó).
• Bạn cần một trạng thái dùng chung giữa mọi instance của lớp đó.
• Lớp con có thể muốn ghi đè hoặc kế thừa hành vi đó.

Còn lại, một hàm thông thường là công cụ đơn giản hơn.

Tiếp theo: private field

Bạn vừa thấy qua #nextId: đó là cú pháp private field của JavaScript. Nó dùng được cho cả thành viên instance lẫn static, và là cách hiện đại để giấu chi tiết cài đặt bên trong lớp. Đó là nội dung tiếp theo.