Prototype là khái niệm cốt lõi trong JavaScript và là cơ chế quan trọng trong việc thực thi mô hình OOP trong JavaScript (nhưng không thực sự không hoàn chỉnh như trong các tiếng nói class-based khác), vì như đã biết, trong JavaScript, không có khái niệm class như các tiếng nói hướng đối tượng người tiêu dùng khác ví như Java hay C#. Nội dung bài viết này sẽ trình bày sơ lược về khái niệm này.

Bạn Đang Xem: Prototype trong JavaScript

Prototype object

Để dễ hiểu, tất cả chúng ta xem xét function sau:

function Person(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; }

Khi function Person được tạo, mặc định nó sẽ sở hữu được một property mang tên là prototype (lưu ý là function trong JavaScript cũng là một object). Property này là một object mà ban sơ chỉ có chứa một property là constructor trỏ trái lại function Person. Và khi function Person này được gọi với từ khóa new, object mới được tạo sẽ thừa hưởng tất cả những property từ Peron.prototype. Để kiểm tra, tất cả chúng ta thêm vào Person.prototype một method là showFullName() như sau:

Xem Thêm : Đắc Nhân Tâm là gì? Những nguyên tắc vàng giúp bạn thành công trong cuộc sống

Person.prototype.showFullName = function() { console.log(this.firstName + ‘ ‘ + this.lastName); } var justin = new Person(‘Justin’, ‘Vo’); console.log(justin); // Person {firstName: “Justin”, lastName: “Vo”} justin.showFullName(); // Justin Vo

Người ta còn gọi Person.prototype là prototype object hay gọn hơn là prototype của object justin, cũng như bất kì object nào được tạo với cú pháp new Person(…).

var david = new Person(‘David’, ‘Truong’); console.log(david); // Person {firstName: “David”, lastName: “Truong”} david.showFullName(); // David Truong

Thật ra tất cả chúng ta có thể khai báo method showFullName() ngay bên trong function Person. Tuy nhiên, do method showFullName() là giống nhau ở mọi object, nên tất cả chúng ta đưa nó lên Person.prototype để các object thừa hưởng lại (nguyên tắc Don’t Repeat Yourself – DRY). Và đó cũng là một trong số các best practice trong JavaScript: constructor chỉ khởi tạo các property riêng biệt cho từng object được tạo, còn các method vận dụng chung cho mọi object sẽ tiến hành tạo ở prototype.

function Person(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; this.friends = []; } Person.prototype.showFullName = function() { console.log(this.firstName + ‘ ‘ + this.lastName); } Person.prototype.addFriend = function(friend) { this.friends.push(friend); } var vancanh = new Person(‘Canh’, ‘Dinh’); var justin = new Person(‘Justin’, ‘Vo’); var micheal = new Person(‘Micheal’, ‘Huynh’); console.log(vancanh.friends); // []; vancanh.addFriend(justin); vancanh.addFriend(micheal); console.log(vancanh.friends); // [Person, Person]

Các object mặc định có sẵn trong JavaScript cũng được xây dựng Theo phong cách tương tự như trên. Ví dụ, prototype của nhiều object được tạo với cú pháp new Object() hoặc {} là Object.prototype, các array được tạo với cú pháp new Array() hoặc [] là Array.prototype và tương tự như vậy cho những object khác ví như RegExp hay Date. Object.prototype được thừa hưởng bởi mọi object và bản thân nó không có prototype (nói cách khác, prototype của nó là null).

Xem Thêm : 420 là gì? Ý nghĩa và lịch sử đặc biệt của con số 420

Thực tế thì tất cả chúng ta không thể truy cập được prototype của một object và cũng không cấp thiết phải dùng đến nó, tuy nhiên, ví dụ như trong Chrome, nó được chấp nhận tất cả chúng ta truy cập vào prototype của một object thông qua một property “giả” là __proto__.

Prototype chain

Cơ chế prototype chain rất đơn giản: khi tất cả chúng ta truy cập vào một trong những property của một object, JavaScript engine sẽ tìm property đó bên trong chính object, nếu không có nó sẽ tìm lên trên prototype của object, và cứ tiếp tục như vậy cho tới khi gặp Object.prototype thì dừng và cho ra kết quả (undefined nếu không tìm thấy). Ví dụ:

var obj1 = { a: 1 }; var obj2 = Object.create(obj1); obj2.b = 2; console.log(obj1.a); // 1 console.log(obj2.a); // 1 console.log(obj2.b); // 2 console.log(obj2.c); // undefined

Trong ví dụ trên, Object.create() sẽ tạo một object mới obj2 với prototype là obj1. Và như đã thấy, mặc dù obj2 không có property a, nhưng tất cả chúng ta vẫn có thể truy cập nó nhờ vào cơ chế prototype chain.

Kết

Mình xin tạm dừng nội dung bài viết tại đây vì có nhẽ đã khá dài. Trên đây tôi đã nỗ lực cố gắng trình bày về prototype Theo phong cách dễ hiểu. Hi vọng qua nội dung bài viết này sẽ khiến cho bạn hiểu hơn về khái niệm prototype trong JavaScript.