Prototype trong JavaScript là gì? Cách sử dụng và thiết lập chi tiết

Bạn là người mới học lập trình và vẫn còn bối rối với những khái niệm như JavaScript hay Prototype? Đừng lo, đây là một trong những kiến thức nền tảng quan trọng mà bất kỳ lập trình viên nào cũng cần nắm vững để phát triển kỹ năng lập trình hiệu quả. Trong bài viết này, HomeNest sẽ giúp bạn hiểu rõ Prototype. 

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

Prototype là một cơ chế quan trọng giúp hiện thực hóa lập trình hướng đối tượng (OOP) trong JavaScript. Thay vì sử dụng class như các ngôn ngữ truyền thống (Java, C++), JavaScript vận hành việc kế thừa thông qua một hệ thống gọi là Prototype-based Inheritance – tức là các object có thể kế thừa lẫn nhau thông qua prototype.

. Đối với các hàm (function), chúng có thêm một thuộc tính đặc biệt là prototype, giúp bạn định nghĩa các thuộc tính và phương thức mà các đối tượng được tạo từ hàm đó sẽ kế thừa.

Nói một cách đơn giản:
👉 Prototype là một object đặc biệt cho phép bạn chia sẻ thuộc tính và phương thức chung cho tất cả các instance được tạo ra từ một hàm khởi tạo.

Những điểm cần ghi nhớ về Prototype

• Trong JavaScript, function cũng là object, vì vậy nó cũng có thể sở hữu thuộc tính – trong đó prototype là một thuộc tính đặc biệt.

• Khi bạn sử dụng một hàm khởi tạo (constructor function) để tạo object, bạn có thể gán các thuộc tính/method vào constructor.prototype để mọi instance đều kế thừa.

• Mỗi object được tạo ra sẽ có một liên kết tới một prototype object, gọi là prototype chain. Thông qua liên kết này, object có thể truy cập các thuộc tính/phương thức mà bản thân nó không trực tiếp sở hữu.

• Để truy cập prototype của một object, bạn có thể dùng thuộc tính __proto__ (không khuyến khích trong thực tế) hoặc thông qua Object.getPrototypeOf(obj) (cách chuẩn ES6+).

Ví dụ minh họa:

Trong ví dụ trên:

• Person.prototype.sayHello được định nghĩa một lần nhưng được chia sẻ bởi tất cả các object được tạo từ Person.

• Điều này giúp tiết kiệm bộ nhớ và duy trì sự nhất quán về hành vi.

Các cách để thiết lập Prototype

Có rất nhiều cách để thiết lập nên prototype của object trong JavaScript. Trong đó có hai cách phổ biến, thường được sử dụng là: Object.create ( ) và constructor.

Thiết lập Prototype bằng Object.create()

Object.create() là một phương thức mạnh mẽ trong JavaScript cho phép bạn tạo một đối tượng mới với một prototype đã được chỉ định sẵn. Cách làm này giúp thiết lập mối quan hệ kế thừa rõ ràng và linh hoạt giữa các object.

👉 Cú pháp:

Trong đó proto là object sẽ được dùng làm prototype cho object mới được tạo.

Ví dụ minh họa:

📌 Giải thích:

• personPrototype là một object chứa phương thức greet().

• carl được tạo bằng Object.create(personPrototype), tức là carl kế thừa mọi thuộc tính và phương thức từ personPrototype.

• Khi gọi carl.greet(), JavaScript sẽ không tìm thấy phương thức greet() trực tiếp trong carl, nên nó tra cứu theo prototype chain và tìm thấy trong personPrototype.

Lưu ý:

• Object.create() không sao chép thuộc tính, mà tạo ra một liên kết prototype.

• Rất hữu ích trong các trường hợp muốn chia sẻ logic chung giữa nhiều object mà không dùng constructor function hay class.

Thiết lập Prototype bằng Constructor Function

Trong JavaScript, mọi hàm đều có một thuộc tính mặc định là prototype. Khi bạn sử dụng một hàm dưới dạng constructor (tức là gọi bằng từ khóa new), đối tượng được tạo ra sẽ tự động kế thừa các thuộc tính và phương thức từ prototype của constructor đó.

🔧 Cách hoạt động:

Khi bạn gán một object mới cho Constructor.prototype, tất cả các instance được tạo từ constructor đó sẽ chia sẻ chung prototype mới này.

Ví dụ:

📌 Giải thích:

1. personPrototype: là object chứa phương thức greet().

2. Person: là constructor function để tạo các đối tượng có thuộc tính name.

3. Person.prototype = personPrototype: thiết lập object personPrototype làm prototype chính thức cho mọi đối tượng được tạo bằng new Person().

4. Person.prototype.constructor = Person: bắt buộc phải khôi phục lại constructor, bởi sau khi gán lại prototype, thuộc tính constructor mặc định sẽ bị mất (trỏ về Object thay vì Person).

✅ Ưu điểm:

• Dễ tổ chức code theo kiểu hướng đối tượng.

• Chia sẻ phương thức hiệu quả (không tạo lại trên mỗi instance).

• Hỗ trợ kế thừa logic từ object mẫu (prototype-based inheritance).

Prototype và Cơ Chế Kế Thừa Trong JavaScript

Một trong những điểm mạnh quan trọng nhất của Prototype chính là khả năng kế thừa. Trong JavaScript, đặc biệt là các phiên bản trước ES6 (chưa hỗ trợ cú pháp class), việc hiện thực mô hình lập trình hướng đối tượng (OOP) hoàn toàn phụ thuộc vào cơ chế kế thừa qua prototype.

Vì sao Prototype lại quan trọng?

Trước khi có class (từ ES6 trở đi), JavaScript không có hệ thống kế thừa theo class như các ngôn ngữ OOP truyền thống như Java hay C++. Do đó, để mở rộng và tái sử dụng mã, các lập trình viên sử dụng cơ chế prototype-based inheritance – kế thừa dựa trên nguyên mẫu.

Cách hoạt động của kế thừa qua Prototype:

1. Tạo một hàm khởi tạo (constructor function) để định nghĩa khuôn mẫu cho các đối tượng.

2. Gán các thuộc tính và phương thức vào prototype của hàm khởi tạo, giúp mọi instance từ hàm đó đều có thể truy cập.

3. Khi khởi tạo một instance mới bằng new, đối tượng đó sẽ kế thừa toàn bộ thuộc tính, phương thức từ prototype của constructor.

Ví dụ minh họa:

---

Ưu điểm của kế thừa bằng Prototype:

• Tối ưu bộ nhớ: các phương thức không được nhân bản trên mỗi instance, mà dùng chung qua prototype.

• Dễ mở rộng hệ thống: chỉ cần cập nhật prototype, mọi đối tượng liên quan đều được kế thừa tự động.

• Cơ chế kế thừa linh hoạt, không bị ràng buộc như class-based.

Tóm lại, prototype là nền tảng cốt lõi cho hệ thống kế thừa trong JavaScript truyền thống. Nó giúp ngôn ngữ này có thể mô phỏng lập trình hướng đối tượng ngay cả khi chưa có class. Hiểu và vận dụng tốt cơ chế prototype là kỹ năng bắt buộc đối với mọi lập trình viên JavaScript.

Cách Sử Dụng Prototype Trong JavaScript

Trong JavaScript, Prototype hoạt động theo hai cách chính:

1. Thêm thuộc tính vào prototype của một object (mở rộng đối tượng).

2. Truy xuất thuộc tính thông qua chuỗi nguyên mẫu (prototype chain) – cách JavaScript Engine tìm kiếm thuộc tính.

1. Thêm thuộc tính vào Prototype

Khi bạn tạo một object thông qua hàm khởi tạo (constructor function), bạn có thể gắn thêm các thuộc tính hoặc phương thức vào prototype của hàm đó. Điều này giúp tất cả các instance (đối tượng được tạo ra từ constructor) đều kế thừa những thuộc tính hoặc phương thức này mà không cần định nghĩa lại.

2. Cách JavaScript Engine tìm thuộc tính (Prototype Chain)

Khi bạn truy cập một thuộc tính trong object, JavaScript Engine sẽ tìm thuộc tính đó theo chuỗi kế thừa:

• Nếu thuộc tính tồn tại trong object hiện tại → trả về ngay.

• Nếu không có → JavaScript tiếp tục tìm trong [[Prototype]] (thuộc tính prototype ẩn) của object đó.

• Quá trình này lặp lại đến khi thuộc tính được tìm thấy hoặc chuỗi kế thừa kết thúc (gặp null).

Kết luận

Qua bài viết, HomeNest hy vọng bạn đã hiểu rõ:

• Prototype là gì.

• Cách thiết lập và sử dụng prototype trong JavaScript.

• Cơ chế kế thừa theo chuỗi nguyên mẫu (prototype chain).

Việc nắm vững kiến thức về Prototype sẽ giúp bạn khai thác tối đa sức mạnh của JavaScript và lập trình theo mô hình hướng đối tượng một cách hiệu quả hơn. Nếu bạn đang học JavaScript một cách nghiêm túc – hãy bắt đầu với Prototype ngay hôm nay.

FAQ – Giải đáp nhanh về Prototype trong JavaScript

Prototype trong JavaScript là gì?

Prototype là một cơ chế giúp các object trong JavaScript kế thừa thuộc tính và phương thức từ nhau. Mỗi object đều liên kết với một prototype object thông qua [[Prototype]].

Làm sao để truy cập vào prototype của một object?

Bạn có thể dùng Object.getPrototypeOf(obj) hoặc obj.__proto__ (không khuyến khích vì không chính thức) để xem prototype của một object.

Khác nhau giữa __proto__ và prototype là gì?

• prototype: là thuộc tính của function, dùng để gán thuộc tính/method cho tất cả object tạo từ function đó.

• __proto__: là thuộc tính của object, dùng để trỏ tới prototype của function khởi tạo ra object đó.

Prototype có giống với class không?

Không hoàn toàn giống. Prototype là nền tảng kế thừa trong JavaScript từ trước khi có class (ES6). Class chỉ là cú pháp mới giúp viết dễ hơn, nhưng vẫn dựa trên nguyên lý prototype.

Có thể kế thừa nhiều cấp bằng prototype không?

Có. JavaScript hỗ trợ kế thừa theo chuỗi (prototype chain). Một object có thể kế thừa từ một prototype, prototype đó lại kế thừa từ một prototype khác, v.v.

Khi nào nên dùng prototype thay vì định nghĩa trực tiếp trong constructor?

Dùng prototype để chia sẻ method giữa nhiều instance, giúp tiết kiệm bộ nhớ và dễ bảo trì. Chỉ nên định nghĩa thuộc tính riêng biệt trong constructor.