Static Methods trong JavaScript

Bây giờ count là một thuộc tính tĩnh nên có thể được truy cập bởi phương thức tĩnh increment().

Ví dụ 3: Dùng phương thức tĩnh để tạo tiện ích

Một ứng dụng phổ biến của phương thức tĩnh là viết các hàm tiện ích (utility functions) như chuyển đổi chuỗi:

class StringUtil {
    static toUpperCase(str) {
        return str.toUpperCase();
    }
}

console.log(StringUtil.toUpperCase("hello")); // "HELLO"

Ta không cần tạo một đối tượng StringUtil, chỉ cần gọi trực tiếp StringUtil.toUpperCase() từ class.

Sự khác biệt giữa phương thức tĩnh và phương thức thông thường trong JavaScript

Phương thức tĩnh (static method) và phương thức thông thường (instance method) có sự khác biệt quan trọng về cách chúng được gọi và cách chúng truy cập dữ liệu trong class.

Phương thức thông thường

Phương thức thông thường có thể truy cập thuộc tính của một instance bằng this:

class Car {
    constructor(brand, speed) {
        this.brand = brand;
        this.speed = speed;
    }

    showDetails() {
        return `Xe ${this.brand} đang chạy với tốc độ ${this.speed} km/h.`;
    }
}

const myCar = new Car("Toyota", 120);
console.log(myCar.showDetails()); //  "Xe Toyota đang chạy với tốc độ 120 km/h."

Ở đây, showDetails() là một phương thức thông thường, nó truy cập các thuộc tính brand và speed của instance bằng this.

Phương thức tĩnh không thể truy cập this của instance

Phương thức tĩnh không thể truy cập trực tiếp các thuộc tính của instance:

class Car {
    constructor(brand, speed) {
        this.brand = brand;
        this.speed = speed;
    }

    static showDetails() {
        return `Xe ${this.brand} đang chạy với tốc độ ${this.speed} km/h.`; //  Lỗi
    }
}

const myCar = new Car("Toyota", 120);
console.log(Car.showDetails()); //  Lỗi: this.brand is undefined

Lý do lỗi là this trong phương thức tĩnh không trỏ đến một instance cụ thể.

Cách sử dụng phương thức tĩnh đúng cách

Nếu muốn phương thức tĩnh hoạt động đúng, ta không nên dùng this mà truyền dữ liệu vào dưới dạng tham số:

class Car {
    static showDetails(brand, speed) {
        return `Xe ${brand} đang chạy với tốc độ ${speed} km/h.`;
    }
}

console.log(Car.showDetails("Toyota", 120)); //  "Xe Toyota đang chạy với tốc độ 120 km/h."

Bây giờ, phương thức tĩnh showDetails() hoạt động độc lập và không phụ thuộc vào instance.

Ứng dụng thực tế của phương thức tĩnh trong JavaScript

Tạo các tiện ích (Utility Functions)

Phương thức tĩnh rất hữu ích khi viết các hàm tiện ích không phụ thuộc vào instance.

Ví dụ: Một class xử lý số học (MathUtil) cung cấp phương thức tính tổng hai số:

class MathUtil {
    static add(a, b) {
        return a + b;
    }
}

console.log(MathUtil.add(10, 20)); //  30

Ở đây, add() là phương thức tĩnh vì nó không cần lưu trạng thái của một instance nào.

Xây dựng Factory Method để tạo instance

Phương thức tĩnh có thể dùng để tạo ra các đối tượng theo mẫu thiết kế Factory Pattern.

Ví dụ: Một class User với phương thức tĩnh createGuestUser() để tạo người dùng khách (Guest):

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

    static createGuestUser() {
        return new User("Guest", "visitor");
    }
}

const guest = User.createGuestUser();
console.log(guest); // User { name: 'Guest', role: 'visitor' }

Ở đây, createGuestUser() giúp tạo một đối tượng User mặc định mà không cần chỉ định tham số.

Quản lý dữ liệu và trạng thái chung

Phương thức tĩnh có thể được dùng để quản lý dữ liệu toàn cục mà không cần tạo nhiều instance.

Ví dụ: Một class Counter giúp đếm số lần chương trình được sử dụng:

class Counter {
    static count = 0;

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

console.log(Counter.increment()); //  1
console.log(Counter.increment()); //  2

class Parent {
    static sayHello() {
        return "Xin chào từ lớp cha!";
    }
}

class Child extends Parent {}

console.log(Child.sayHello()); //  "Xin chào từ lớp cha!"

class Parent {
    static sayHello() {
        return "Xin chào từ lớp cha!";
    }
}

class Child extends Parent {
    static sayHello() {
        return super.sayHello() + " Và xin chào từ lớp con!";
    }
}

console.log(Child.sayHello()); 
//  "Xin chào từ lớp cha! Và xin chào từ lớp con!"

class Parent {
    static baseValue = 10;

    static getValue() {
        return this.baseValue;
    }
}

class Child extends Parent {}

console.log(Child.getValue()); //  10

class MathUtils {
    static add(a, b) {
        return a + b;
    }

    static subtract(a, b) {
        return a - b;
    }
}

console.log(MathUtils.add(10, 5)); //  15
console.log(MathUtils.subtract(10, 5)); //  5

class Config {
    static apiUrl = "https://api.example.com";
    static timeout = 5000;

    static getApiUrl() {
        return this.apiUrl;
    }
}

console.log(Config.getApiUrl()); //  "https://api.example.com"

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

    static createGuest() {
        return new User("Guest", "visitor");
    }
}

const guest = User.createGuest();
console.log(guest); //  User { name: 'Guest', role: 'visitor' }

class Car {
    constructor(brand) {
        this.brand = brand;
    }

    static showBrand() {
        return `Xe của bạn là ${this.brand}`; //  Lỗi: this.brand is undefined
    }
}

const myCar = new Car("Toyota");
console.log(myCar.showBrand()); //  Lỗi