Prototype là một khái niệm quan trọng trong lập trình JavaScript, tuy nhiên nó có thể khá xa lạ với các lập trình viên mới. Kiến thức về Prototype là cốt lõi trong lập trình, vì vậy hãy cùng tìm hiểu về Prototype và cách thiết lập nó. Bài viết này sẽ giải đáp mọi thắc mắc và cung cấp thông tin liên quan đến ngôn ngữ này. Hãy tiếp tục đọc để hiểu rõ hơn về Prototype bạn nhé!
Prototype là gì?
Prototype là cơ chế trong JavaScript để thực hiện mô hình OOP (Lập trình Hướng đối tượng), trong đó các đối tượng có thể kế thừa tính năng từ nhau. Mỗi object trong JavaScript đều có một thuộc tính gọi là prototype.
Bạn đang xem: Prototype là gì? Hướng dẫn chi tiết cách thiết lập Prototype
Ngôn ngữ lập trình này liên kết mọi hàm và mọi object theo mặc định, trong đó thuộc tính prototype của hàm có thể truy cập và sửa đổi, trong khi thuộc tính prototype của object thì không thể nhìn thấy.
Prototype là một object đặc biệt có thể gắn thêm thuộc tính vào, object này có thể được chia sẻ trên các phiên bản của hàm khởi tạo.
Một cách dễ hiểu, prototype là một object trong JavaScript.
Prototype của object
Thuộc tính Prototype của object là không nhìn thấy. Để truy cập Prototype object, sử dụng phương thức Object.getPrototypeOf(obj) thay vì proto.
Prototype object bao gồm các thuộc tính và phương thức như sau:
- Constructor: trả về hàm đã tạo
- __proto__: đây là thuộc tính của một object, trả về prototype object mà được kết nối đến
Prototype chain
Cơ chế của Prototype chain khá đơn giản: khi truy cập một thuộc tính trên object, JavaScript sẽ tìm thuộc tính này trong đối tượng. Nếu không tìm thấy, nó sẽ tiếp tục tìm trong prototype của đối tượng cho đến khi đạt đến Object.prototype. Nếu không tìm thấy, kết quả sẽ là undefined. Ví dụ:
var obj1 = {
a: 1,
b: 2
};
var obj2 = Object.create(obj1);
obj2.a = 2;
console.log(obj2.a); // 2
console.log(obj2.b); // 2
console.log(obj2.c); // undefined
Ở đoạn code trên, câu lệnh var obj2 = Object.create(obj1) sẽ tạo object obj2 với obj1 là prototype của nó. Tức là obj2 kế thừa các thuộc tính của obj1. Vì vậy, cho dù b không phải là thuộc tính của obj2, vẫn có thể truy cập nó thông qua prototype chain. Tuy nhiên, đối với thuộc tính c, kết quả sẽ không xác định vì không tìm thấy trong Object.prototype và obj1.
Cách thiết lập Prototype đúng cách
Xem thêm : ĐĂNG NHẬP TÀI KHOẢN ỨNG VIÊN
Có nhiều cách để thiết lập Prototype của một object trong JavaScript, nhưng hai cách phổ biến nhất là:
Sử dụng Object.create
Phương thức này tạo ra một object mới và cho phép bạn chỉ định một object làm prototype cho object mới.
Ví dụ:
const personPrototype = {
greet() {
console.log('Hello!');
}
};
const carl = Object.create(personPrototype);
carl.greet(); // Hello!
Trong ví dụ trên, ta tạo một object personPrototype với phương thức greet(). Sau đó sử dụng Object.create() để tạo một object mới với personPrototype làm prototype. Bây giờ ta có thể gọi greet() trên object mới và prototype cung cấp cách triển khai của nó.
Sử dụng constructor
Trong JavaScript, tất cả các hàm đều có thuộc tính prototype. Khi gọi một hàm như một constructor, thuộc tính này sẽ được đặt làm prototype của object mới. Vì vậy, nếu ta đặt prototype của một constructor, tất cả các object được tạo từ constructor đó sẽ kế thừa prototype đó. Ví dụ:
const personPrototype = {
greet() {
console.log(`Hello, my name is ${this.name}!`);
}
};
function Person(name) {
this.name = name;
}
Person.prototype = personPrototype;
Person.prototype.constructor = Person;
Ở đây, ta tạo:
- Một object personPrototype với phương thức greet()
- Một constructor Person để khởi tạo tên của người
Sau đó, ta đặt prototype của hàm Person trỏ về personPrototype.
Dòng cuối cùng đặt thuộc tính constructor của prototype cho hàm Person. Điều này là bắt buộc vì sau khi đặt Person.prototype = personPrototype, thuộc tính này sẽ trỏ về constructor của personPrototype là Object chứ không phải Person (vì personPrototype được xây dựng như một object literal).
Sau đoạn code này, tất cả các object được tạo bằng Person() sẽ kế thừa prototype của nó.
Prototype, sự kế thừa
Đây là một tính năng mạnh mẽ và linh hoạt của JavaScript, cho phép tái sử dụng code và kết hợp các object với nhau.
Xem thêm : Cá guppy là gì
Prototype cung cấp tính năng kế thừa. Kế thừa là một trong những đặc điểm nổi bật của Prototype.
Kế thừa là một tính năng của lập trình hướng đối tượng (OOP) cho phép người dùng chứng minh ý tưởng “object trong hệ thống là phiên bản chuyên biệt của các object khác”.
Ví dụ: Nếu bạn đang lập trình mô hình một trường học, trong trường học sẽ có học sinh và giáo viên. Cả hai đều là người, nên có những đặc điểm giống nhau như tên. Tuy nhiên, mỗi người cũng có những đặc điểm riêng như giáo viên có môn dạy. Trong lập trình hướng đối tượng, ta có thể nói rằng tất cả các học sinh và giáo viên đều có thuộc tính kế thừa từ lớp cha là người.
Trong JavaScript, bạn có thể kế thừa các thuộc tính chung nếu các object có thể có prototype là người. Đồng thời, có thể thêm và định nghĩa lại các thuộc tính khác.
Cách sử dụng Prototype trong JavaScript
Ngôn ngữ này cho phép xác định dễ dàng các phương thức cho tất cả các trường hợp của object. Ý tưởng hay ở đây là phương thức chỉ được áp dụng cho prototype, nên chỉ cần lưu trữ một lần trong bộ nhớ. Tuy nhiên, mọi instance của object đều có thể truy cập vào phương thức này.
Ví dụ:
function Pet(name, species){
this.name = name;
this.species = species;
}
function view(){
return this.name + " is a " + this.species + "!";
}
Pet.prototype.view = view;
var pet1 = new Pet('Gabriella', 'Dog');
alert(pet1.view()); // Gabriella is a Dog!
Trong ví dụ trên, chỉ cần sử dụng prototype để gắn phương thức view, ta đã đảm bảo rằng tất cả các object pet đều có quyền truy cập và sử dụng phương thức này để xem. Ta cũng có thể sử dụng phương thức này để tạo ra nhiều hiệu ứng khác nhau.
Ví dụ: Chúng ta muốn có thêm một object Dog và object này kế thừa từ pet object và có thêm những tính năng đặc biệt chỉ có dog object mới có quyền truy cập.
- Redux là gì? Tổng hợp kiến thức quan trọng về Redux
- jQuery là gì? Tổng quan về jQuery cho người mới bắt đầu
function Pet(name, species){
this.name = name;
this.species = species;
}
function view(){
return this.name + " is a " + this.species + "!";
}
Pet.prototype.view = view;
function Dog(name){
Pet.call(this, name, "dog");
}
Dog.prototype = new Pet();
Dog.prototype.bark = function(){
alert("Woof!");
}
var pet1 = new Pet('Trudy', 'Bird');
var pet2 = new Dog('Gabriella');
alert(pet2.view()); // Gabriella is a Dog!
pet2.bark(); // Woof!
pet1.bark(); // Lỗi
Thông qua một chuỗi prototype, ta có thể truy cập view ở pet2.view(). Đầu tiên, ta kiểm tra object Dog và Pet có phương thức view không. Vì Dog là kế thừa từ Pet và Pet là kế thừa từ Object.prototype.
Object.prototype.whoAmI = function(){
alert(“I am an object!”);
}
pet1.whoAmI(); // I am an object!
pet2.whoAmI(); // I am an object!
Đó là những điều cơ bản về Prototype. Hy vọng rằng bài viết đã giúp bạn hiểu rõ hơn về Prototype là gì và cách sử dụng nó trong JavaScript. Nếu bạn có bất kỳ thắc mắc nào, hãy liên hệ với chúng tôi để được giải đáp ngay lập tức.
