Prototype là gì? Tất cả những gì bạn cần biết về Prototype trong Javascript

1. Prototype là gì?

Trong Javascript, Prototype là một cơ chế để thực hiện việc lập trình hướng đối tượng (Object-oriented Programming), nó giúp các đối tượng kế thừa đặc tính của nhau. Thực chất, chính Prototype cũng là một đối tượng, được gọi là Object Prototype, nó liên kết các hàm (Function) và đối tượng (Object) theo cách mặc định trong Javascript. Object Prototype là một loại đối tượng đặc biệt, ta có thể gắn các thuộc tính bổ sung vào nó, và từ đó cập nhật thuộc tính mới cho tất cả các hàm đã khởi tạo của nó. Trong Javascript:

• Prototype của Object có thuộc tính ẩn (invisible).
• Prototype Attribute của một Object: cho biết thông tin về Prototype Object mà Object đó kế thừa thuộc tính.
• Mọi hàm trong Javascript đều có một thuộc tính Prototype (mặc định là trống rỗng) và bạn có thể thêm các thuộc tính hoặc phương thức trên thuộc tính Prototype này.

2. Tại sao phải dùng Prototype trong Javascript?

Chúng ta biết rằng, trong Javascript ngoại trừ undefined và null các kiểu khác đều là Object, ví dụ, mảng thì Object là dạng Array, hàm thì Object là Function. Mặc dù hiện nay Javascript đã có khái niệm Class, nên người ta vẫn dùng Prototype để kế thừa (inheritance) thuộc tính của các hàm hay các trường của một Object. Khi sử dụng Prototype chúng ta có thể chia sẻ thuộc tính, phương thức của các Object khác nhau, từ đó, có thể tiết kiệm bộ nhớ đồng thời tăng tốc độ thực thi của chương trình. 

Để thực hiện kế thừa thuộc tính trong Javascript, đầu tiên, chúng ta chỉ cần tạo ra một hàm khởi tạo, sau đó, thêm các thuộc tính cho Prototype của hàm này. Kết quả là các instance mà được tạo ra từ hàm khởi tạo cũng chứa những thuộc tính mà chúng ta đã thêm vào (xem hình minh họa bên dưới). 

Nếu chúng ta tưởng tượng Javascript là một đế chế có sự phân chia quyền lực và cấp bậc thì Object.prototype sẽ có quyền lực cao nhất, nó là cấp trên cao nhất của tất cả những Object khác. Ví dụ, Array sẽ là cấp dưới của Array.prototype nhưng Array.prototype lại là cấp dưới của Object.prototype; tương tự Function sẽ là cấp dưới của Function.prototype nhưng Function.prototype lại là cấp dưới của Object.prototype. Những điều này có nghĩa là, nếu bạn thay đổi thuộc tính của Function hay Array thì chỉ mình nó thay đổi nhưng nếu bạn thay đổi thuộc tính của Object.prototype thì Function.prototype, Array.prototype và cả Function, Array cũng được kế thừa những điều đó.

Khi bạn hiểu rõ đặc tính, vai trò của Prototype trong Javascript thì có thể sử dụng nó một cách linh hoạt và hiệu quả để thêm tính năng, chức năng cho các Object mà bạn xây dựng. 

3. Sử dụng Prototype trong Javascript

Hai phần trên đã giúp các bạn hiểu được Prototype là gì. Trong phần này, chúng tôi sẽ hướng dẫn các bạn sử dụng Prototype trong Javascript một cách đơn giản và dễ hiểu nhất thông qua các ví dụ minh họa cụ thể.

3.1 Tạo và thêm thuộc tính Prototype cho Object

Chúng ta có thể sử dụng thuộc tính Prototype của một hàm để tạo ra Prototype. Ví dụ, để tạo ra một Object là “Website”, rồi tạo cho nó các thuộc tính đặc trưng là: “ten”, “diachi” và tạo cho nó phương thức “loichao”, chúng ta có thể sử dụng đoạn code sau:

Trong đoạn code trên, chúng ta đã sử dụng lệnh “this” để gán các giá trị cho thuộc tính “ten” và “diachi” của Object “Website” được xây dựng bằng cách dùng Function. Tiếp theo, chúng ta đã sử dụng Prototype để thêm vào phương thức “loichao” cho nó. Như đã trình bày ở các phần trên, phương thức “loichao” này sẽ có ở tất cả các Object mà được chúng ta tạo ra bằng cách dùng hàm “Website” đã xây dựng ở trên. Cụ thể là ngoài đoạn code ở trên chúng ta sẽ thêm các dòng lệnh sau:

      Chúng ta đã sử dụng hàm “new” để tạo ra hai Object là website1 và website2  có phương thức “loichao” và các thuộc tính “ten”, “diachi”.

3.2 Hoạt động của Prototype

Học lập trình hay học kiến thức về một ngôn ngữ lập trình nào đó một cách nhanh nhất và dễ nhất chính là học qua các ví dụ và thực hành. Vậy, để hiểu rõ hơn nữa về hoạt động và vai trò của Prototype trong Javascript, các bạn hãy cùng theo dõi một ví dụ sau đây:

• Đầu tiên chúng ta tạo ra một Object là “Father” và chỉ có một khả năng là “học toán”, với đoạn code:

• Do Object “Son” được tạo ra từ hàm “Father” nên nó cũng chỉ biết “học toán”. Bây giờ, nếu chúng ta muốn “Father” có thêm khả năng nữa là “học văn” thì chúng ta sẽ sử dụng Prototype. Khi đó, Object “Son” cũng sẽ được kế thừa thuộc tính mới là “học văn” mà ta đã thêm vào cho “Father”.

• Đến đây, nếu chúng ta thêm trực tiếp vào Object.prototype một khả năng mới là “học lập trình”, thì do tính kế thừa của Prototype, Object “Son” cũng mặc nhiên có thêm được khả năng này. 

• Ví dụ trên đã minh họa rõ vai trò và hoạt động của Prototype trong Javascript.

4. Lời Kết

Như vậy, ICANTECH - Nền tảng học lập trình trực tuyến đã giúp bạn tìm hiểu về Prototype cũng như cách sử dụng Prototype trong Javascript. Chúng tôi hy vọng bài viết đã mang đến cho các bạn những kiến thức bổ ích và giúp các bạn thành công trên con đường trở thành một lập trình viên Javascript.

Nguồn ảnh: ICANTECH.