Trong bài viết này, cùng mình tìm hiểu về các prototype trong JavaScript với các ví dụ cụ thể dưới đây.
Như bạn đã biết, bạn có thể tạo một object trong JavaScript bằng cách sử dụng một hàm tạo đối tượng (object).
Ví dụ như:
// constructor function
function Person () {
this.name = 'John',
this.age = 23
}
// creating objects
const person1 = new Person();
const person2 = new Person();Code language: JavaScript (javascript)Trong ví dụ trên, function Person() là một hàm tạo đối tượng. Tôi đã tạo ra hai đối tượng person1 và person2 từ đoạn code trên.
Và tiếp theo tôi sẽ phân tích cụ thể các ý chính cho bạn hiểu hơn dưới đây!
Prototype trong JavaScript
Trong JavaScript, mọi hàm và đối tượng đều có thuộc tính có tên là prototype theo mặc định.
Ví dụ:
function Person () {
this.name = 'John',
this.age = 23
}
const person = new Person();
// checking the prototype value
console.log(Person.prototype); // { ... }Code language: JavaScript (javascript)Ở ví dụ trên, tôi đang cố gắng truy cập thuộc tính prototype của một hàm khởi tạo Person.
Vì thuộc tính prototype không có giá trị tại thời điểm này, nó đã hiển thị một đối tượng trống{…}.
Kế thừa Prototype
Trong JavaScript, một prototype có thể được sử dụng để thêm các thuộc tính và phương thức vào một hàm khởi tạo. Và các đối tượng kế thừa các thuộc tính và phương thức từ một prototype.
Ví dụ:
// constructor function
function Person () {
this.name = 'John',
this.age = 23
}
// creating objects
const person1 = new Person();
const person2 = new Person();
// adding property to constructor function
Person.prototype.gender = 'male';
// prototype value of Person
console.log(Person.prototype);
// inheriting the property from prototype
console.log(person1.gender);
console.log(person2.gender);Code language: JavaScript (javascript)Đầu ra
{ gender: "male" }
male
maleCode language: CSS (css)Trong chương trình trên, tôi đã thêm một property gender mới vào hàm khởi tạo Person bằng cách sử dụng:
Person.prototype.gender = 'male';
Code language: JavaScript (javascript)Sau đó đối tượng person1 và person2 kế thừa property gender từ giá trị thuộc tính prototype của hàm khởi tạo Person.
Do đó, cả hai đối tượng person1 và person2 có thể truy cập vào gender property.
Lưu ý: Tại đây mình có cú pháp để thêm thuộc tính vào một hàm tạo đối tượng là:
objectConstructorName.prototype.key = 'value';
Code language: JavaScript (javascript)Prototype được sử dụng để cung cấp thuộc tính bổ sung cho tất cả các đối tượng được tạo từ một hàm khởi tạo.
Thêm các phương thức vào một hàm tạo bằng cách sử dụng prototype
Bạn cũng có thể thêm các phương thức mới vào một hàm khởi tạo bằng cách sử dụng prototype.
Ví dụ:
// constructor function
function Person () {
this.name = 'John',
this.age = 23
}
// creating objects
const person1 = new Person();
const person2 = new Person();
// adding a method to the constructor function
Person.prototype.greet = function() {
console.log('hello' + ' ' + this.name);
}
person1.greet(); // hello John
person2.greet(); // hello JohnCode language: JavaScript (javascript)Trong chương trình trên, một phương thức greet mới được thêm vào hàm khởi tạo Person bằng cách sử dụng một prototype.
Thay đổi prototype
Nếu một giá trị prototype được thay đổi, thì tất cả các đối tượng mới sẽ có giá trị thuộc tính thay đổi. Tất cả các đối tượng được tạo trước đó sẽ có giá trị trước đó.
Ví dụ:
// constructor function
function Person() {
this.name = 'John'
}
// add a property
Person.prototype.age = 20;
// creating an object
const person1 = new Person();
console.log(person1.age); // 20
// changing the property value of prototype
Person.prototype = { age: 50 }
// creating new object
const person3 = new Person();
console.log(person3.age); // 50
console.log(person1.age); // 20Code language: JavaScript (javascript)Lưu ý: Bạn không nên sửa đổi property của các đối tượng tích hợp sẵn trong JavaScript tiêu chuẩn như chuỗi, mảng, v.v. Đây được coi là một hành động thực hành không tốt.
Chuỗi prototype trong JavaScript
Nếu một đối tượng cố gắng truy cập cùng một thuộc tính có trong hàm khởi tạo và đối tượng prototype, đối tượng sẽ lấy thuộc tính từ hàm khởi tạo.
Ví dụ:
function Person() {
this.name = 'John'
}
// adding property
Person.prototype.name = 'Peter';
Person.prototype.age = 23
const person1 = new Person();
console.log(person1.name); // John
console.log(person1.age); // 23Code language: JavaScript (javascript)Trong chương trình trên, một thuộc tính name được khai báo trong hàm khởi tạo và cả trong thuộc tính prototype của hàm tạo.
Khi chương trình hoạt động, person1.name được tìm thấy trong hàm khởi tạo để xem có thuộc tính property nào được đặt tên name hay không. Vì hàm khởi tạo có name property với giá trị 'John', đối tượng nhận giá trị từ property đó.
Khi chương trình hoạt động tiếp, person1.age được tìm thấy trong hàm khởi tạo để xem có thuộc tính property nào được đặt tên age hay không. Vì hàm khởi tạo không có age property, chương trình sẽ xem xét đối tượng property của hàm tạo và đối tượng kế thừa thuộc tính từ đối tượng property (nếu có).
Lưu ý : Bạn cũng có thể truy cập thuộc tính property của một hàm khởi tạo từ một đối tượng.
function Person () {
this.name = 'John'
}
// adding a prototype
Person.prototype.age = 24;
// creating object
const person = new Person();
// accessing prototype property
console.log(person.__proto__); // { age: 24 }Code language: JavaScript (javascript)Trong ví dụ trên, một đối tượng person được sử dụng để truy cập thuộc tính property bằng cách sử dụng __proto__. Tuy nhiên, __proto__đã không được dùng nữa và bạn cần nên tránh sử dụng nó.
Kết luận
Và đó là những ví dụ giúp bạn hiểu rõ hơn về prototype trong JavaScript và chúng hữu dụng ra sao!
Cảm ơn bạn đã theo dõi bài viết!
Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU
KHOÁ HỌC BOOTCAMP JAVA/JAVASCRIPT/PHP TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG
