Prototype là gì?

Khái niệm prototype trong lập trình nói chung

Prototype (nguyên mẫu) là một khái niệm có thể được hiểu như một khuôn mẫu, một bản thiết kế gốc mà từ đó các đối tượng khác được tạo ra. Tương tự như cách một kiến trúc sư tạo ra bản vẽ trước khi xây dựng tòa nhà, prototype cung cấp một bản thiết kế mà các đối tượng khác sẽ dựa vào đó để được xây dựng.

Trong lập trình hướng đối tượng, prototype đóng vai trò như một cơ chế cho phép các đối tượng chia sẻ thuộc tính và phương thức mà không cần phải định nghĩa lại chúng cho mỗi đối tượng. Điều này giúp tiết kiệm bộ nhớ và tạo ra cấu trúc kế thừa linh hoạt, nơi các đối tượng con có thể thừa hưởng các đặc điểm từ đối tượng cha.

Prototype trong JavaScript là gì?

Prototype JavaScript là gì? Nói một cách đơn giản, prototype trong JavaScript là cơ chế cho phép các đối tượng kế thừa thuộc tính và phương thức từ một đối tượng khác. Không giống như các ngôn ngữ lập trình hướng đối tượng truyền thống như Java hay C++ sử dụng kế thừa dựa trên lớp (class-based inheritance), JavaScript sử dụng kế thừa dựa trên prototype là gì - một cơ chế được gọi là "prototypal inheritance" (kế thừa nguyên mẫu).

Trong JavaScript, mỗi đối tượng đều có một liên kết đến một đối tượng khác gọi là prototype của nó. Khi bạn cố gắng truy cập một thuộc tính không tồn tại trên đối tượng, JavaScript sẽ tìm kiếm thuộc tính đó trong prototype của đối tượng. Nếu không tìm thấy, nó sẽ tiếp tục tìm kiếm trong prototype của prototype, và cứ tiếp tục như vậy cho đến khi tìm thấy thuộc tính hoặc cho đến khi đạt đến cuối chuỗi prototype (thường là Object.prototype).

Sự khác biệt lớn nhất giữa prototype JavaScript là gì so với kế thừa dựa trên lớp là: trong khi kế thừa dựa trên lớp sử dụng "bản thiết kế" (lớp) để tạo các đối tượng, thì kế thừa dựa trên prototype cho phép các đối tượng kế thừa trực tiếp từ các đối tượng khác. Điều này làm cho JavaScript linh hoạt và động hơn, cho phép bạn thay đổi cấu trúc kế thừa ngay cả sau khi đối tượng đã được tạo.

Prototype trong JavaScript là cơ chế cho phép các đối tượng kế thừa thuộc tính và phương thức từ một đối tượng khác

Cách hoạt động của prototype trong JavaScript

Object prototype và chuỗi prototype (prototype chain)

Để hiểu sâu hơn về cách prototype là gì và hoạt động trong JavaScript, chúng ta cần nắm rõ khái niệm về chuỗi prototype. Mỗi đối tượng trong JavaScript đều có một liên kết đến prototype của nó - đây là nơi JavaScript sẽ tìm kiếm các thuộc tính và phương thức nếu chúng không được tìm thấy trực tiếp trên đối tượng.

Khi bạn tạo một đối tượng trong JavaScript, nó sẽ tự động kế thừa từ Object.prototype, đây là đỉnh của chuỗi prototype. Object.prototype cung cấp các phương thức cơ bản như toString(), valueOf(), hasOwnProperty() mà tất cả các đối tượng đều có thể sử dụng.

Xét ví dụ sau:

Trong ví dụ trên, rabbit kế thừa từ animal thông qua việc thiết lập proto. Khi chúng ta truy cập rabbit.eats, JavaScript không tìm thấy thuộc tính "eats" trực tiếp trên rabbit, nên nó tìm kiếm trên prototype của rabbit (chính là animal) và tìm thấy thuộc tính "eats" ở đó.

Thuộc tính proto và hàm tạo prototype

Trong JavaScript, chúng ta cần phân biệt rõ hai khái niệm: proto và .prototype.

• proto: Là một thuộc tính của mỗi đối tượng, trỏ đến prototype của đối tượng đó. Nó là một liên kết giữa một đối tượng và prototype của nó.
  
  
• .prototype: Là một thuộc tính của constructor function (hàm tạo), chứa các thuộc tính và phương thức mà các đối tượng được tạo từ constructor đó sẽ kế thừa.
  
  

Sự khác biệt này thường gây nhầm lẫn cho người mới học prototype JavaScript là gì. Hãy xem ví dụ sau:

Trong ví dụ này:

• Person.prototype là đối tượng chứa các thuộc tính và phương thức mà tất cả các instance của Person sẽ kế thừa.
• john.proto trỏ đến Person.prototype, thiết lập mối quan hệ kế thừa.
• Khi gọi john.sayHello(), JavaScript không tìm thấy phương thức này trên john, nên nó tìm kiếm trong john.proto (tức là Person.prototype) và tìm thấy phương thức sayHello ở đó.

Bạn đọc tham khảo thêm: 

Figma là gì? Cách bắt đầu học Figma cho người mới

Neural Network là gì? Tìm hiểu artificial, deep và convolutional neural network từ A-Z

Ví dụ minh họa về prototype trong JavaScript

Tạo phương thức dùng prototype

Một trong những ứng dụng phổ biến nhất của prototype JavaScript là gì là việc thêm phương thức vào constructor function. Điều này cho phép tất cả các instance của constructor đều có thể sử dụng phương thức đó mà không cần định nghĩa lại cho mỗi instance.

Xét ví dụ về một constructor function cho đối tượng Car:

Ưu điểm lớn nhất của việc sử dụng prototype là gì trong trường hợp này là tiết kiệm bộ nhớ. Thay vì mỗi instance của Car đều phải có bản sao riêng của các phương thức start() và stop(), tất cả các instance đều chia sẻ cùng một bản sao thông qua prototype. Điều này đặc biệt quan trọng khi bạn có nhiều instance hoặc các phương thức phức tạp.

Sửa đổi prototype và tác động đến các đối tượng

Một đặc điểm thú vị của prototype JavaScript là gì là khả năng sửa đổi prototype ngay cả sau khi các đối tượng đã được tạo. Điều này có nghĩa là bạn có thể thêm, sửa đổi hoặc xóa các thuộc tính và phương thức từ prototype, và tất cả các đối tượng kế thừa từ prototype đó sẽ ngay lập tức phản ánh những thay đổi.

Khả năng sửa đổi prototype sau khi các đối tượng đã được tạo là một tính năng mạnh mẽ của JavaScript, nhưng cũng cần được sử dụng cẩn thận. Việc sửa đổi prototype của các đối tượng tích hợp sẵn như Array, String, hoặc Object có thể gây ra những hậu quả không lường trước được và nên tránh trong hầu hết các trường hợp.

Những sai lầm thường gặp khi học prototype

Khi học về prototype JavaScript là gì, nhiều người mới thường mắc phải một số sai lầm điển hình. Hiểu rõ những sai lầm này sẽ giúp bạn tránh được những lỗi tương tự và sử dụng prototype hiệu quả hơn.

Những lỗi phổ biến

• Nhầm lẫn giữa .prototype và proto: Như đã đề cập, .prototype là thuộc tính của constructor function, trong khi proto là thuộc tính của instance trỏ đến prototype của nó. Nhầm lẫn này có thể dẫn đến những lỗi khó phát hiện.
  
  
• Gán sai prototype mới mà không giữ constructor gốc: Khi bạn gán một đối tượng mới cho .prototype của constructor, thuộc tính constructor có thể bị mất, gây ra những vấn đề khi sử dụng instanceof hoặc các hoạt động liên quan đến constructor.
  
  

• Sử dụng prototype khi không cần thiết: Đôi khi, việc thêm các phương thức trực tiếp vào đối tượng thay vì prototype có thể là phù hợp hơn, đặc biệt là khi bạn chỉ có một vài đối tượng hoặc các phương thức cần được cá nhân hóa cho mỗi đối tượng.

Cách tránh sai lầm

Để tránh những sai lầm khi làm việc với prototype là gì trong JavaScript, bạn nên:

• Hiểu rõ về chuỗi prototype: Hãy tưởng tượng chuỗi prototype như một chuỗi tìm kiếm mà JavaScript sẽ đi theo khi tìm thuộc tính. Nếu không tìm thấy ở đối tượng hiện tại, nó sẽ tiếp tục tìm trong prototype, và cứ tiếp tục như vậy.
  
  
• Tham khảo tài liệu chính thống: MDN Web Docs và cuốn sách "You Don't Know JS" của Kyle Simpson là những nguồn tài liệu tuyệt vời để hiểu sâu về prototype JavaScript là gì.
  
  
• Thực hành qua các bài tập nhỏ: Tạo các constructor function đơn giản, thêm phương thức vào prototype của chúng, và quan sát cách các instance kế thừa các phương thức đó. Thử nghiệm với việc sửa đổi prototype và xem những thay đổi ảnh hưởng đến các instance như thế nào.
  
  
• Sử dụng ES6 class khi phù hợp: ES6 giới thiệu cú pháp class, một "lớp vỏ bọc" (syntactic sugar) cho prototype-based inheritance, giúp code dễ đọc hơn đồng thời vẫn duy trì cơ chế prototype bên dưới.

Kết luận

Prototype là gì trong JavaScript không chỉ là một khái niệm cơ bản mà còn là nền tảng cho kế thừa trong ngôn ngữ này. Hiểu rõ cách prototype JavaScript là gì và hoạt động sẽ giúp bạn viết code hiệu quả hơn, tối ưu hóa hiệu suất và tránh được những lỗi phổ biến. Cho dù bạn sử dụng cú pháp ES6 class hay prototype truyền thống, nắm vững kiến thức về prototype sẽ giúp bạn trở thành một developer JavaScript chuyên nghiệp hơn.