Prototype là gì? Hiểu Prototype Chain trong JavaScript qua ví dụ
Prototype trong JavaScript là gì và vì sao khái niệm này lại quan trọng khi học JavaScript? Nếu bạn từng thắc mắc vì sao object có thể dùng được các phương thức như toString(), hasOwnProperty() dù không tự khai báo, câu trả lời nằm ở prototype. Đây là cơ chế cốt lõi giúp JavaScript kế thừa thuộc tính, chia sẻ method giữa nhiều object và vận hành class ở phía sau. Trong bài viết này, bạn sẽ hiểu rõ prototype trong JavaScript là gì, prototype chain hoạt động ra sao, khác gì với __proto__, Function.prototype và cần lưu ý gì để tránh lỗi khi lập trình.
Tóm Tắt Bài Viết
Prototype là gì?
Prototype trong JavaScript là một object được dùng làm nơi lưu trữ các thuộc tính hoặc phương thức có thể chia sẻ cho nhiều object khác.
Trong JavaScript, hầu hết mọi object đều có một liên kết nội bộ trỏ đến một object khác. Object được trỏ đến đó gọi là prototype của object hiện tại. Khi bạn truy cập một thuộc tính hoặc phương thức trên object, JavaScript sẽ tìm trực tiếp trong object đó trước. Nếu không thấy, JavaScript tiếp tục tìm trong prototype của object.
Ví dụ:
const user = {
name: “Nam”
};
console.log(user.name); // Nam
console.log(user.toString); // function toString()
Trong ví dụ trên, object user không tự định nghĩa method toString(). Tuy nhiên, bạn vẫn có thể truy cập user.toString vì JavaScript tìm thấy method này trong prototype của object.
Nói cách khác, prototype giúp object “mượn” thuộc tính hoặc phương thức từ object khác thông qua một chuỗi liên kết.
Prototype chain là gì?
Prototype chain là chuỗi liên kết giữa một object và các prototype phía sau nó.
Khi JavaScript không tìm thấy thuộc tính trong object hiện tại, nó sẽ tiếp tục tìm trong prototype của object đó. Nếu vẫn không thấy, JavaScript tiếp tục tìm lên prototype tiếp theo. Quá trình này lặp lại cho đến khi tìm thấy thuộc tính hoặc gặp null.
Ví dụ:
const user = {
name: “Nam”
};
console.log(user.toString());
Object user không có method toString(). JavaScript sẽ tìm theo thứ tự:
user → Object.prototype → null
Nếu toString() tồn tại trong Object.prototype, JavaScript sẽ sử dụng method đó. Nếu không tìm thấy ở bất kỳ đâu trong chuỗi prototype, kết quả trả về sẽ là undefined.
Prototype chain là lý do vì sao các object trong JavaScript có thể sử dụng nhiều method mặc định như toString(), hasOwnProperty() hoặc valueOf() dù bạn không tự khai báo chúng.
Nguyên lý hoạt động của Prototype
Để sử dụng thành thạo Prototype thì bạn cần nắm vững phương thức hoạt động của nó. Prototype JS có 2 cách thức hoạt động.
Bổ sung thuộc tính Prototype cho đối tượng
Bước đầu, lập trình viên sẽ khởi tạo các object theo cách thông dụng bởi constructor. Sau khi tạo hàm xong, bạn có thể theme một số thuộc tính khác vào hàm. Các thuộc tính này sẽ trỏ đến Prototype object của hàm construction. Tóm lại, quá trình này bao gồm 2 công đoạn chính: hàm gửi yêu cầu đến constructor và constructor xử lý rồi trả về một instance tương ứng.
Tìm kiếm prototype property của Javascript engines
Ngoài khả năng thêm thuộc tính Prototype, cơ chế Prototype còn cho phép bạn tìm kiếm cả prototype property nữa. Để thực hiện quá trình tìm kiếm, bạn cần truy cập vào thuộc tính của một đối tượng. Sau đó Javascript engines sẽ auto chạy tìm kiếm thuộc tính mà bạn cần. Nếu như thuộc tính này có tồn tại thì kết quả sẽ được xuất ra ngay.
Ngược lại, nếu thuộc tính này không tồn tại thì cơ chế này sẽ kiểm tra xuống đến thuộc tính trong các đối tượng nguyên mẫu hoặc đối tượng kế thừa. Quá trình rà soát thành công thì sẽ trả ra kết quả thông tin về thuộc tính cần tìm. Còn nếu vẫn không tìm thấy thuộc tính đó thì kết quả sẽ là undefined.
Tầm quan trọng của Prototype
Như đã nói, muốn sử dụng JavaScript thì phải cần đến Prototype. Nhờ cơ chế kế thừa và khả năng truy cập các đối tượng, prototype trong javascript trở nên đa nhiệm và sẵn sàng trợ giúp coder trong nhiều công đoạn.
Cơ chế kế thừa
Tính kế thừa là một trong những đặc điểm nổi bật nhất của Prototype. Trước khi phiên bản ES5 ra đời, Prototype là điều duy nhất hỗ trợ JavaScript có thể ứng dụng được OOP. Từ phiên bản ES5 trở về sau, class ra đời nhằm hỗ trợ thêm nhiều mục đích khác chứ không phải để thay thế Prototype.
Để duy trì khả năng này, lập trình viên sẽ cần sử dụng đến Prototype. Cơ chế prototype-based sẽ được tạo nên như một nền tảng cho thuộc tính này. Để tiến hành hoạt động kế thừa, lập trình viên cần khởi tạo nên một hàm. Sau đó hãy thêm vào các thuộc tính cũng như phương thức thuộc tính Prototype cho hàm vừa khởi tạo này. Khi đó instance được tạo ra từ hàm khởi tạo sẽ chứa các phương thức và thuộc tính được định nghĩa sẵn theo mong muốn của bạn. Prototype sẽ là cách duy nhất để thực hiện kế thừa và mở rộng ngôn ngữ OOP trên hệ javascript.
Khả năng truy cập các đối tượng
Thuộc tính quan trọng và là nhiệm vụ quan trọng của Prototype chính là hỗ trợ các lập trình viên có thể xác định được thuộc tính và phương thức trên 1 đối tượng.
Prototype object sẽ là nơi chứa các thuộc tính, phương thức được kế thừa. Quá trình kiểm tra này sẽ được JavaScript thực hiện một cách tự động và bạn chỉ cần truy cập vào Prototype object là được.
Prototype và class trong JavaScript khác nhau thế nào?
Trong JavaScript, class là cú pháp hiện đại giúp viết code hướng đối tượng dễ đọc hơn. Tuy nhiên, bên dưới class vẫn hoạt động dựa trên prototype.
Ví dụ dùng class:
class User {
constructor(name) {
this.name = name;
}
sayHello() {
return “Xin chào, tôi là ” + this.name;
}
}
const user = new User(“Nam”);
console.log(user.sayHello()); // Xin chào, tôi là Nam
Ví dụ tương đương khi dùng prototype:
function User(name) {
this.name = name;
}
User.prototype.sayHello = function() {
return “Xin chào, tôi là ” + this.name;
};
const user = new User(“Nam”);
console.log(user.sayHello()); // Xin chào, tôi là Nam
Hai cách viết trên gần giống nhau về bản chất. Method sayHello() trong class không được tạo riêng cho từng object, mà được đặt trong prototype của class.
Kiểm tra:
console.log(Object.getPrototypeOf(user) === User.prototype); // true
Sự khác nhau chủ yếu nằm ở cú pháp và cách tổ chức code.
| Tiêu chí | Prototype | Class |
| Bản chất | Cơ chế gốc của JavaScript | Cú pháp hiện đại dựa trên prototype |
| Cách viết | Dùng constructor function và .prototype | Dùng từ khóa class |
| Độ dễ đọc | Khó hơn với người mới | Dễ đọc, gần với OOP truyền thống |
| Kế thừa | Dùng Object.create() hoặc gán prototype | Dùng extends |
| Ứng dụng | Hiểu sâu cơ chế JS, tối ưu method dùng chung | Viết code hướng đối tượng rõ ràng hơn |
Nếu bạn mới học JavaScript, bạn nên hiểu prototype trước để nắm bản chất. Sau đó, bạn có thể dùng class để viết code gọn và dễ bảo trì hơn.
Khi nào nên dùng prototype?
Bạn nên dùng prototype khi cần chia sẻ method hoặc thuộc tính chung cho nhiều object được tạo từ cùng một constructor function.
Ví dụ, nếu bạn tạo hàng trăm object User, mỗi object đều cần method login(), logout() hoặc getProfile(), bạn nên đặt các method này trong prototype. Điều này giúp tiết kiệm bộ nhớ và giữ code dễ quản lý.
Prototype phù hợp trong các trường hợp sau:
- Khi nhiều object cần dùng chung một method.
- Khi bạn làm việc với constructor function.
- Khi bạn cần hiểu hoặc tùy chỉnh cơ chế kế thừa trong JavaScript.
- Khi bạn xây dựng thư viện, framework hoặc utility cần tối ưu bộ nhớ.
- Khi bạn cần debug lỗi liên quan đến object, class hoặc kế thừa.
Ví dụ:
function Account(username) {
this.username = username;
}
Account.prototype.login = function() {
return this.username + ” đã đăng nhập”;
};
const account1 = new Account(“admin”);
const account2 = new Account(“editor”);
console.log(account1.login());
console.log(account2.login());
Trong ví dụ này, login() được chia sẻ qua prototype, không bị nhân bản trong từng object.
Tuy nhiên, trong các dự án hiện đại, bạn thường dùng class thay vì thao tác trực tiếp với .prototype. Dù vậy, hiểu prototype vẫn rất quan trọng vì class trong JavaScript vẫn dựa trên prototype.
Một số lưu ý khi sử dụng Prototype
Sử dụng Prototype khi nào?
Ngoài việc hiểu Prototype là gì thì nhiều người cũng thắc mắc: Khi nào thì sử dụng Prototype? Bất cứ ngành cũng có thể sử dụng Prototype và đặc biệt là ngành công nghệ thông tin hoặc những ngành có thể bỏ ra chi phí cực thấp để tạo ra Prototype.
Prototype sẽ ẩn đi việc trao đổi đối tượng giữa client. Do đó, để thực hiện, bạn sẽ cần phải copy những giá trị có sẵn của object => tạo 1 mẫu mới và dán vào để sử dụng. Điều này sẽ hạn chế thiệt hại nếu có khi thử nghiệm.
Một số lưu ý khi sử dụng
- Để sử dụng JS bạn cần thạo Prototype và ngược lại. Bạn càng thông thạo JavaScript thì sử dụng Prototype càng dễ
- Đa số tài liệu viết bằng tiếng Anh do đó bạn cần biết tiếng Anh để nghiên cứu tài liệu.
- Trong JavaScript, hàm sẽ được gọi là một object và object này sẽ có thuộc tính Prototype. Chỉnh thuộc tính Prototype sẽ mang lại giá trị rất khác cho object.
- Các object trong JavaScript được gọi bằng khái niệm Prototype Attribute. Prototype Attribute là đặc tính có giá trị trỏ đến Prototype Object mà chúng kế thừa. Khi ấy, bạn có thể sử dụng các thuộc tính _proto_ để truy cập vào Prototype Object.
Kết luận
Trên đây là toàn bộ thông tin BKNS cung cấp cho bạn về Prototype là gì. Và một số thông tin quan trọng khác để giúp bạn có thêm “hàng trang vào nghề”. Hy vọng bài viết hữu ích với bạn. Nếu còn bất cứ điều gì băn khoăn. Bạn hãy để lại bình luận bên dưới, đội ngũ tư vấn viên kịp thời giải đáp.
>Có thể bạn quan tâm: Top 10 Extension VSC Hay Nhất Cho Lập Trình Viên
