Private field trong JavaScript: cú pháp # để ẩn dữ liệu lớp

Vấn đề của dấu gạch dưới

Trong nhiều năm, JavaScript không có private field. Quy ước khi đó là thêm dấu gạch dưới vào trước tên thuộc tính và mong mọi người tôn trọng nó:

class Counter {
    constructor() {
        this._count = 0;
    }
    increment() {
        this._count++;
    }
}

const c = new Counter();
c.increment();
console.log(c._count);   // 1 - nothing stops this
c._count = 999;          // or this
console.log(c._count);   // 999

_count trông như private nhưng không phải. Bất kỳ code gọi nào cũng đọc, ghi hoặc xóa được nó. Dấu gạch dưới chỉ là tấm biển lịch sự treo trên cửa, còn cánh cửa thì vẫn mở toang.

JavaScript hiện đại đã khắc phục chuyện này bằng private field thật sự, đánh dấu bằng #.

Dấu # biến trường thành private

Thêm tiền tố # vào tên trường khi khai báo và ở mọi chỗ truy cập:

class Counter {
    #count = 0;

    increment() {
        this.#count++;
    }

    get value() {
        return this.#count;
    }
}

const c = new Counter();
c.increment();
c.increment();
console.log(c.value);    // 2

Bên trong lớp, this.#count hoạt động bình thường. Từ bên ngoài, nó như không tồn tại:

class Counter {
    #count = 0;
    increment() { this.#count++; }
}

const c = new Counter();
// console.log(c.#count);   // SyntaxError at parse time
console.log(c["#count"]);   // undefined - not the same property

# thực sự là một phần của tên trường. Nó không phải từ khóa bổ nghĩa như private ở các ngôn ngữ khác, mà là ký hiệu để bộ phân tích cú pháp tra cứu một ô riêng, được bảo vệ trên đối tượng. Vì vậy lỗi xuất hiện ngay lúc phân tích cú pháp, trước cả khi code chạy.

Phương thức và getter private

Không chỉ trường mới đánh dấu private được. Phương thức, getter và setter đều nhận tiền tố #:

class BankAccount {
    #balance = 0;

    deposit(amount) {
        this.#assertPositive(amount);
        this.#balance += amount;
    }

    get balance() {
        return this.#balance;
    }

    #assertPositive(n) {
        if (n <= 0) throw new Error("Amount must be positive");
    }
}

const acc = new BankAccount();
acc.deposit(100);
console.log(acc.balance);    // 100
// acc.#assertPositive(5);   // SyntaxError

#assertPositive là hàm trợ giúp nội bộ. Nó không thuộc API công khai, nên khi biến nó thành private thật sự thì không ai vô tình gọi nó từ bên ngoài, và cũng không ai phụ thuộc vào nó được. Nhờ đó bạn vẫn thoải mái đổi tên hoặc xóa nó sau này.

Thành viên static private

Thành viên static cũng có thể là private. Thêm tiền tố # theo cách tương tự:

class IdGenerator {
    static #nextId = 1;

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

console.log(IdGenerator.generate());   // 1
console.log(IdGenerator.generate());   // 2
// console.log(IdGenerator.#nextId);   // SyntaxError

Static private nằm trên chính lớp, không nằm trên instance. Hữu ích cho bộ đếm, bộ nhớ đệm hoặc cấu hình không nên lọt ra khỏi lớp.

Lớp con không nhìn thấy chúng

Điều này hay làm khó người chuyển từ Java hoặc C# sang. Private field của JavaScript là class-private, không phải instance-private. Lớp con không với tới được private field của lớp cha:

class Animal {
    #name;
    constructor(name) {
        this.#name = name;
    }
    describe() {
        return `an animal named ${this.#name}`;
    }
}

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

console.log(new Dog("Rex").bark());

JavaScript không có protected. Nếu lớp con cần dữ liệu, lớp cha phải cung cấp phương thức, getter hoặc (ít gặp hơn) một trường không private. Thiết kế này có chủ ý: private nghĩa là private thật, và kế thừa (inheritance) không tạo lỗ hổng nào trong đó.

Kiểm tra private field bằng in

Đôi khi bạn muốn xác nhận một đối tượng thực sự thuộc về lớp của mình, gọi là brand check. Toán tử in dùng được với tên private field bên trong lớp:

class Wallet {
    #balance = 0;

    static isWallet(obj) {
        return #balance in obj;
    }
}

const real = new Wallet();
const fake = { balance: 100 };

console.log(Wallet.isWallet(real));   // true
console.log(Wallet.isWallet(fake));   // false

Vì chỉ Wallet mới tạo được đối tượng có #balance, nên #balance in obj là phép kiểm tra đáng tin cậy rằng obj là một instance Wallet thật. Trong một số trường hợp biên, cách này nhanh và an toàn hơn instanceof, vì private field không thể bị giả mạo từ bên ngoài.

Lỗi hay gặp: đối tượng thường không có private field

Private field nằm trên các instance do hàm khởi tạo của lớp tạo ra. Nếu bạn dùng nó trên một đối tượng không được tạo bằng new, code sẽ ném lỗi:

class Point {
    #x;
    constructor(x) { this.#x = x; }
    getX() { return this.#x; }
}

const p = new Point(5);
console.log(p.getX());       // 5

const fake = {};
// Point.prototype.getX.call(fake);   // TypeError: Cannot read private member #x

Gọi phương thức với this không phải Point sẽ ném lỗi lúc chạy. Đây chính là cơ chế đứng sau brand check ở trên: private field gắn với đúng lớp đã khai báo nó, không gắn với bất kỳ đối tượng nào chỉ tình cờ trông giống.

Khi nào nên dùng #

Hãy mặc định dùng private field mỗi khi một trạng thái hay hàm trợ giúp không thuộc API công khai của lớp. Lý do:

• Tự do tái cấu trúc. Code gọi không thể phụ thuộc vào phần bên trong mà chúng hoàn toàn không nhìn thấy.
• Đóng gói thật sự. Không có chuyện code bên ngoài vô tình đọc, ghi hay xóa.
• Gợi ý tự động gọn hơn. Trình soạn thảo không gợi ý thành viên private cho code gọi từ bên ngoài.

Dùng thuộc tính công khai khi thứ đó thật sự thuộc giao diện của lớp. Dùng getter (get name()) khi bạn muốn cho đọc private field mà không cho ghi. Bỏ quy ước dấu gạch dưới đi: đó chỉ là cách chữa cháy cho một khoảng trống mà giờ ngôn ngữ đã lấp đầy.

class Temperature {
    #celsius;

    constructor(celsius) {
        this.#celsius = celsius;
    }

    get celsius() { return this.#celsius; }
    get fahrenheit() { return this.#celsius * 9 / 5 + 32; }
}

const t = new Temperature(20);
console.log(t.celsius);      // 20
console.log(t.fahrenheit);   // 68
// t.celsius = 100;          // TypeError: no setter - read-only

#celsius là nơi lưu trữ ẩn; celsius và fahrenheit là các góc nhìn chỉ đọc. Code gọi không thể làm hỏng trạng thái bên trong, và lớp vẫn tự do thay đổi cách lưu giá trị sau này.

Tiếp theo: prototype

Lớp phần lớn chỉ là cú pháp rút gọn (syntactic sugar) bên trên hệ thống prototype của JavaScript, mô hình lâu đời và nền tảng hơn mà ngôn ngữ thật sự được xây dựng trên đó. Hiểu prototype giúp bạn hiểu vì sao this hoạt động như vậy, kế thừa thực sự vận hành thế nào và một lớp extends điều gì ở bên dưới. Đó là nội dung trang tiếp theo.