Prototype trong JavaScript
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 ngôn ngữ class-based khác), vì như đã biết, trong JavaScript, không có khái niệm class như các ngôn ngữ hướng đối tượng khác như Java hay C#. Bài viết này Bizfly Cloud sẽ trình bày sơ lược về khái niệm này.
Prototype object
Để dễ hiểu, 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ẽ có một Property có 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 đầu chỉ có chứa một Property là Constructor trỏ ngược 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ẽ kế thừa tất cả các Property từ Peron.prototype. Để kiểm tra, chúng ta thêm vào Person.prototype một Method là showFullName() như sau:
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 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 chúng ta đưa nó lên Person.prototype để các object kế thừa lại (nguyên lý 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 mỗi Object được tạo, còn các Method áp dụng chung cho mọi Object sẽ được 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 cách tương tự như trên. Ví dụ, Prototype của các 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ư thế cho các Object khác như RegExp hay Date. Object.prototype được kế thừa 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).
Thực tế thì chúng ta không thể truy cập được Prototype của một Object và cũng không cần thiết phải dùng đến nó, tuy nhiên, chẳng hạn như trong Chrome, nó cho phép 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 chúng ta truy cập vào một 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ư thế cho đến 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 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 bài viết tại đây vì có lẽ đã khá dài. Trên đây mình đã cố gắng trình bày về Prototype theo cách dễ hiểu. Hi vọng qua bài viết này sẽ giúp bạn hiểu hơn về khái niệm Prototype trong JavaScript.
Theo Bizfly Cloud chia sẻ
BizFly Cloud là nhà cung cấp dịch vụ điện toán đám mây với chi phí thấp, được vận hành bởi VCCorp.
BizFly Cloud là một trong 4 doanh nghiệp nòng cốt trong "Chiến dịch thúc đẩy chuyển đổi số bằng công nghệ điện toán đám mây Việt Nam" của Bộ TT&TT; đáp ứng đầy đủ toàn bộ tiêu chí, chỉ tiêu kỹ thuật của nền tảng điện toán đám mây phục vụ Chính phủ điện tử/chính quyền điện tử.
Độc giả quan tâm đến các giải pháp của BizFly Cloud có thể truy cập tại đây.
DÙNG THỬ MIỄN PHÍ và NHẬN ƯU ĐÃI 3 THÁNG tại: Manage.bizflycloud
