Một lỗi phổ biến là cố gắng áp dụng tư duy OOP của Java hoặc C# vào JavaScript. Dù JS có từ khóa class (từ ES6), nhưng đó chỉ là Syntactic Sugar (cú pháp "ngọt" cho dễ viết). Bản chất bên dưới vẫn là Prototypes.
1. Prototype Chain là gì?
Mọi object trong JS đều có một thuộc tính ẩn gọi là [[Prototype]] (thường được truy cập qua __proto__). Khi bạn truy cập một thuộc tính của object:
- JS tìm trong chính object đó.
- Nếu không thấy, nó tìm trong
Prototypecủa object. - Nếu vẫn không thấy, nó tìm lên tầng cao hơn.
- Quá trình dừng lại khi chạm tới
null(đỉnh của chuỗi -Object.prototype).
2. Master: Prototype vs proto
Prototype: Là một thuộc tính của Function (Constructor). Nó chỉ định những gì các object được tạo ra bởi function đó sẽ "kế thừa".__proto__: Là thuộc tính của Instance (Object cụ thể). Nó trỏ trực tiếp đếnPrototypecủa constructor đã tạo ra nó.
3. Lab: Chứng minh bản chất Prototype
Hãy chạy bài Lab sau để thấy cách một object "mượn" phương thức từ prototype của nó.
4. Tại sao cái tên "Syntactic Sugar" lại quan trọng?
Khi bạn dùng class trong JS, V8 Engine vẫn convert nó về Function và Prototype bên dưới.
Senior Concept:
- Ưu điểm: Tiết kiệm bộ nhớ. Nếu bạn có 1000 object, phương thức trong Prototype chỉ tồn tại 1 lần duy nhất trong bộ nhớ, thay vì nhân bản 1000 lần.
- Tính linh hoạt: Bạn có thể thay đổi Prototype của một hệ thống ngay cả khi ứng dụng đang chạy (Monkey Patching) - điều cực kỳ khó hoặc không thể làm trong Java.
Hiểu rõ điều này giúp bạn thiết kế các thư viện UI hoặc Design System Core có hiệu năng tối ưu nhất.