Vượt xa Object.defineProperty: Xây dựng logic Reactive với Proxy và Reflect

Table of Contents

Phiên gỡ lỗi lúc 2 giờ sáng: Tại sao Object thuần là chưa đủ

Đó là lúc 2 giờ sáng, và một dashboard production đang bị treo. Mặc dù log cho thấy dữ liệu vẫn đang đổ về, nhưng UI vẫn đứng yên. Thủ phạm? Một thuộc tính object lồng nhau trong hệ thống quản lý state đã thay đổi, nhưng ứng dụng không hề nhận ra. Chúng tôi đã dựa vào Object.defineProperty vốn đã cũ kỹ, gặp khó khăn với việc thêm thuộc tính mới và thay đổi mảng. Việc ‘dirty checking’ thủ công cuối cùng đã chạm tới giới hạn.

JavaScript Proxy và Reflect giải quyết vấn đề này bằng cách bao bọc các object để đánh chặn (intercept) các thao tác cơ bản. Thay vì là những thùng chứa dữ liệu thụ động, bạn sẽ có những thành phần tham gia tích cực, có thể phản ứng khi được đọc, ghi hoặc xóa. Theo kinh nghiệm của tôi, mô hình này giúp ổn định việc đồng bộ hóa state trên các micro-frontend, nơi mà việc theo dõi luồng dữ liệu thường giống như ‘lùa vịt’. Tôi đã sử dụng cách này để quản lý state dùng chung cho ba ứng dụng con khác nhau mà không gặp một lỗi lệch pha (desync) nào.

Các object thông thường về cơ bản là bộ lưu trữ dữ liệu thụ động. Bạn đưa dữ liệu vào và lấy ra. Chúng không cung cấp cách thức bản địa nào để nói rằng: “Chờ đã, email của người dùng vừa thay đổi; chúng ta cần xác thực định dạng và kích hoạt render lại.” Proxy biến sự thụ động đó thành một hệ thống reactive phản hồi mọi tương tác.

Thiết lập môi trường để phát triển với Proxy

Thật tiện lợi khi Proxy và Reflect là các object toàn cục có sẵn. Không cần npm install. Tuy nhiên, bạn phải nhắm mục tiêu đến môi trường hiện đại. Proxy xuất hiện trong ES6 (2015) và can thiệp trực tiếp vào các thao tác cấp thấp của engine JavaScript. Vì lý do này, nó không thể được polyfill hiệu quả cho các tính năng như đánh chặn việc thêm thuộc tính.

Bất kỳ phiên bản Node.js nào trên 6.x đều hoạt động, nhưng tôi khuyên bạn nên sử dụng bản LTS mới nhất (như v20 hoặc v22) để có hiệu suất tốt nhất. Các trình duyệt hiện đại như Chrome, Firefox và Edge đều hỗ trợ đầy đủ. Bạn có thể xác minh môi trường của mình bằng một bước kiểm tra nhanh trong console:

// Kiểm tra nhanh môi trường
if (typeof Proxy === 'undefined' || typeof Reflect === 'undefined') {
    console.error('Môi trường không hỗ trợ. Đã đến lúc nâng cấp runtime của bạn.');
} else {
    console.log('Proxy và Reflect đã sẵn sàng hoạt động.');
}

Hãy theo dõi sát sao pipeline build của bạn. Nếu bạn sử dụng Babel hoặc SWC, hãy đảm bảo chúng không cố gắng transpile Proxy thành mã cũ. Vì Proxy dựa trên các hook cấp engine, việc transpile thường dẫn đến logic bị hỏng hoặc giảm hiệu suất nghiêm trọng. Nếu dự án của bạn vẫn yêu cầu hỗ trợ IE11, rất tiếc Proxy không phải là lựa chọn dành cho bạn.

Cấu hình bộ đánh chặn đầu tiên: Proxy Traps và Reflect

Một Proxy cần hai thành phần: một target (object gốc) và một handler. Handler chứa các ‘trap’—các hàm định nghĩa hành vi tùy chỉnh khi ai đó tương tác với object.

Bỏ qua Reflect là một sai lầm phổ biến của các lập trình viên. Reflect là một object tích hợp cung cấp các phương thức cho các thao tác có thể đánh chặn, khớp 1:1 với các trap của Proxy. Sử dụng chúng cùng nhau đảm bảo hành vi mặc định vẫn được giữ nguyên. Điều này rất quan trọng khi xử lý các thuộc tính kế thừa hoặc duy trì ngữ cảnh this chính xác trong các object phức tạp.

Cấu trúc bộ đánh chặn cơ bản

Dưới đây là một bộ xác thực (validator) thực tế mà tôi đã thiết kế để ngăn chặn các lỗi ‘state không hợp lệ’. Nó đảm bảo các kiểu dữ liệu nhất quán trước khi chúng chạm tới database hoặc UI của bạn.

const userSchema = {
    name: 'string',
    age: 'number'
};

const rawData = { name: 'John', age: 30 };

const validatorHandler = {
    get(target, prop, receiver) {
        // Truy vết truy cập để gỡ lỗi các điểm nghẽn hiệu suất
        console.log(`[Audit]: Thuộc tính "${prop}" đã được truy cập.`);
        return Reflect.get(target, prop, receiver);
    },
    
    set(target, prop, value, receiver) {
        if (prop in userSchema && typeof value !== userSchema[prop]) {
            throw new TypeError(`Xác thực thất bại: ${prop} phải là một ${userSchema[prop]}.`);
        }
        
        console.log(`[Update]: Đang thiết lập ${prop} thành ${value}`);
        // Reflect.set trả về true nếu thành công, false nếu thất bại
        return Reflect.set(target, prop, value, receiver);
    }
};

const userProxy = new Proxy(rawData, validatorHandler);

Tại sao Reflect là bắt buộc

Hãy tránh việc sử dụng target[prop] = value bên trong trap set. Nếu object đích có một setter tùy chỉnh hoặc nằm trên chuỗi prototype, việc gán đơn giản có thể thất bại trong im lặng. Reflect.set xử lý logic [[Set]] nội bộ một cách chính xác và trả về một giá trị boolean. Nếu trap set của bạn không trả về true, JavaScript sẽ ném ra một TypeError trong strict mode, điều này có thể làm sập ứng dụng của bạn.

Kiểm chứng: Xây dựng một Framework Reactive mini

Để thấy điều này hoạt động, chúng ta có thể xây dựng một hệ thống reactive nhỏ. Logic này mô phỏng cách Vue 3 xử lý tính reactivity. Chúng ta muốn ‘theo dõi’ (track) khi một thuộc tính được sử dụng và ‘kích hoạt’ (trigger) một bản cập nhật ngay khi nó thay đổi.

const state = new Proxy({ name: 'Alice', age: 25 }, {
    get(target, prop, receiver) {
        console.log('Phụ thuộc đã được theo dõi.');
        return Reflect.get(target, prop, receiver);
    },
    set(target, prop, value, receiver) {
        const oldValue = target[prop];
        const success = Reflect.set(target, prop, value, receiver);
        
        if (success && oldValue !== value) {
            console.log('Giá trị đã thay đổi! Đang render lại...');
            document.getElementById('app').innerText = `Người dùng: ${target.name}, Tuổi: ${target.age}`;
        }
        return success;
    }
});

// Cập nhật proxy giờ đây sẽ tự động cập nhật DOM
// state.name = 'Bob';

Chỉ cần thay đổi state.name, và UI sẽ phản hồi ngay lập tức. Điều này loại bỏ nhu cầu về các bộ phát sự kiện (event emitter) thủ công nằm rải rác trong các component của bạn. Tôi thấy mô hình này cực kỳ hữu ích cho các cấu hình toàn cục, chẳng hạn như thay đổi theme hoặc cập nhật ngôn ngữ, nơi nhiều phần của ứng dụng phải luôn đồng bộ.

Giám sát và các bẫy hiệu suất

Sức mạnh đi kèm với cái giá của nó. Mỗi lần truy cập thuộc tính giờ đây sẽ kích hoạt một lời gọi hàm. Trong các thao tác tần suất cao, như một vòng lặp chạy 100.000 lần, Proxy có thể chậm hơn từ 10 đến 20 lần so với việc truy cập object thô. Tôi đã học được bài học này một cách đau đớn khi xử lý các mảng đỉnh WebGL—việc bao bọc chúng trong một Proxy đã khiến tốc độ khung hình của chúng tôi giảm từ 60 FPS xuống còn 15 FPS.

Gỡ lỗi Proxy hiệu quả

Một điều khó chịu: console.log(proxy) trong các console cũ sẽ hiển thị cấu trúc Proxy nội bộ thay vì dữ liệu của bạn. Để xem các giá trị bên dưới, hãy sử dụng JSON.parse(JSON.stringify(proxy)). Trong Chrome DevTools hiện đại, bạn chỉ cần mở rộng phần xem trước ‘Target’ để xem object thô.

Best Practices cho thế giới thực

Tránh lồng nhau quá sâu: Proxy mặc định là nông (shallow). Để làm cho một object lồng nhau trở nên reactive, bạn phải bao bọc đệ quy các object con bên trong trap get. Chỉ thực hiện việc này nếu cấu trúc dữ liệu của bạn thực sự yêu cầu.
Sử dụng Revocable Proxies: Nếu bạn đang truyền dữ liệu cho một plugin bên thứ ba, hãy sử dụng Proxy.revocable(). Điều này cho phép bạn ‘ngắt’ quyền truy cập proxy sau khi plugin hoàn thành tác vụ của nó.
Giữ các trap gọn nhẹ: Đừng bao giờ thực hiện các tính toán nặng hoặc gọi API bên trong trap get. Nó sẽ khiến toàn bộ UI của bạn cảm thấy chậm chạp và không phản hồi.

Proxy và Reflect hiệu quả nhất ở ranh giới ứng dụng của bạn, cụ thể là trong các lớp quản lý dữ liệu hoặc state. Chúng đóng vai trò là những người bảo vệ tính toàn vẹn của dữ liệu. Bằng cách đánh chặn các thao tác ở cấp độ ngôn ngữ, bạn tạo ra một hệ thống tự xác thực giúp bạn thoát khỏi những cuộc marathon gỡ lỗi lúc 2 giờ sáng đáng sợ đó.