Prototype Javascript: Định nghĩa & Cách thiết lập

Ngày viết: 2023-10-25 16:15:36

Bạn mới bắt đầu làm quen với lập trình Javascript? Prototype có lẽ là một khái niệm khá lạ lẫm. Tuy nhiên, đây lại là kiến thức nền tảng mà mọi lập trình viên Javascript cần nắm vững. Bài viết này của TVD Media sẽ giúp bạn hiểu rõ Prototype là gì và cách thiết lập Prototype một cách chi tiết nhất!

Khái niệm Prototype là gì?

Prototype là một cơ chế cho phép các lập trình viên hiện thực hóa mô hình OOP (Object-Oriented Programming - Lập trình hướng đối tượng) trong Javascript, trong đó các đối tượng có thể kế thừa lẫn nhau.

Hiểu một cách đơn giản, Prototype là một đối tượng đặc biệt, có thể được liên kết với các thuộc tính khác hoặc được chia sẻ giữa tất cả các phiên bản của một hàm. Nói cách khác, Prototype chính là "bản thiết kế" của một đối tượng trong Javascript.

Lưu ý quan trọng về Prototype:

Mọi đối tượng trong Javascript đều có một Prototype.
Prototype có thể là một đối tượng khác, hoặc null.
Khi bạn truy cập một thuộc tính của đối tượng, nếu thuộc tính đó không tồn tại trên đối tượng, Javascript sẽ tìm kiếm nó trong Prototype của đối tượng đó.

Phương pháp thiết lập Prototype

Có nhiều cách để thiết lập Prototype cho một đối tượng trong Javascript. Dưới đây là hai phương pháp phổ biến nhất:

Sử dụng `Object.create()` để tạo Prototype

Phương thức Object.create() cho phép chúng ta tạo một đối tượng mới, đồng thời chỉ định Prototype của đối tượng đó.

Ví dụ:

const personPrototype = {    greet() {        console.log('Xin chào!');    }};const carl = Object.create(personPrototype);carl.greet(); // Xin chào!

Trong ví dụ trên, chúng ta tạo một đối tượng personPrototype với phương thức greet(). Sau đó, sử dụng Object.create() để tạo một đối tượng mới (carl) có Prototype là personPrototype. Kết quả là carl có thể gọi phương thức greet() mặc dù phương thức này không được định nghĩa trực tiếp trên carl.

Thiết lập Prototype với hàm tạo (Constructor Function)

Trong Javascript, tất cả các hàm đều có thuộc tính prototype. Khi chúng ta gọi một hàm bằng từ khóa new (hàm tạo), tất cả các thuộc tính của hàm này sẽ được gán vào Prototype của đối tượng mới.

Do đó, nếu chúng ta thiết lập Prototype cho hàm tạo, tất cả các đối tượng được tạo bởi hàm tạo đó sẽ có chung Prototype.

Ví dụ:

const personPrototype = {    greet() {        console.log(`Xin chào, tên tôi là ${this.name}!`);    }};function Person(name) {    this.name = name;}Person.prototype = personPrototype;Person.prototype.constructor = Person;const jane = new Person("Jane");jane.greet(); // Xin chào, tên tôi là Jane!

Trong ví dụ này, chúng ta tạo một hàm tạo Person và gán personPrototype cho Person.prototype. Dòng Person.prototype.constructor = Person; đảm bảo rằng thuộc tính constructor của Prototype vẫn trỏ đến hàm tạo Person.

Prototype và Kế thừa (Inheritance)

Một trong những lý do quan trọng khiến Prototype trở nên đặc biệt là khả năng kế thừa. Prototype mang đến cơ chế kế thừa trong Javascript, điều mà Javascript ES5 còn thiếu.

Nhờ Prototype, các đối tượng được tạo bởi hàm tạo có thể kế thừa các phương thức và thuộc tính được định nghĩa trong Prototype. Đây là cách Javascript hiện thực hóa mô hình OOP.

Cách sử dụng Prototype trong Javascript

Prototype hoạt động thông qua hai cơ chế chính:

Truy cập thuộc tính của đối tượng.
Tìm kiếm thuộc tính trong Prototype của đối tượng.

Khi bạn cố gắng truy cập một thuộc tính của đối tượng, Javascript engine sẽ tự động tìm kiếm thuộc tính đó. Nếu thuộc tính tồn tại trực tiếp trên đối tượng, nó sẽ được trả về. Nếu không, Javascript sẽ tiếp tục tìm kiếm trong Prototype của đối tượng, và cứ tiếp tục như vậy cho đến khi tìm thấy thuộc tính hoặc đến khi Prototype là null.

Hy vọng bài viết này của TVD Media đã giúp bạn hiểu rõ hơn về Prototype trong Javascript và cách thiết lập Prototype. Nếu bạn cần tư vấn về thiết kế website, SEO website, chạy quảng cáo Google Ads, Facebook Ads, Tiktok Ads, Zalo Ads, hoặc các dịch vụ marketing online khác, hãy liên hệ với TVD Media qua số điện thoại +84966779629 hoặc truy cập website tvdmedia.vn.