Trong Javascript, Prototype là một khái niệm rất quan trọng, nó cho phép tạo ra các đối tượng và chia sẻ các thuộc tính phương thức giữa các đối tượng khác nhau. Trong bài viết này, chúng ta sẽ đi sâu vào khái niệm Prototype trong Javascript và tìm hiểu về cách nó hoạt động.

1. Prototype trong javascript là gì?

Prototype là một tính năng không thể thiếu trong JavaScript và là cơ chế thiết yếu trong việc thực thi mô hình OOP trong JavaScript. Mỗi đối tượng JavaScript đều có một prototype hay một đối tượng khác mà nó được kế thừa các thuộc tính và phương thức đó.

Các đối tượng được tạo bởi một hàm xây dựng (constructor function) được liên kết với một prototype, mà được định nghĩa bằng cách sử dụng thuộc tính “prototype” của hàm đó. Đối tượng được tạo ra bằng cách sử dụng toán tử “new” sẽ được gán cho prototype của hàm xây dựng đó, do vậy sẽ kế thừa tất cả các thuộc tính của phương thức prototype đó.

Việc sử dụng Prototype trong JavaScript cho phép chúng ta định nghĩa các thuộc tính, chia sẻ chúng giữa nhiều đối tượng khác nhau, giúp tiết kiệm bộ nhớ và tăng tốc độ thực thi của chương trình. Ngoài ra, nó cũng cho phép chúng ta mở rộng các đối tượng có sẵn bằng cách thêm mới các thuộc tính và phương thức vào prototype của chúng.

2. Tạo ra prototype như thế nào?

Trong JavaScript, ta có thể tạo ra prototype bằng cách sử dụng thuộc tính “prototype” của một hàm xây dựng (constructor function). Ví dụ, để tạo ra một đối tượng “Person” với các thuộc tính “name” và “age” và phương thức “greet”, ta có thể làm như sau:

Ví dụ trên ta đã tạo ra một hàm xây dựng “Person” với hai tham số là “name” và “age”, sử dụng “this” để gán giá trị cho thuộc tính “name” và “age” của đối tượng được tạo ra bằng cách sử dụng hàm xây dựng này.

Sau đó, ta sử dụng thuộc tính “prototype” của hàm xây dựng “Person” để thêm phương thức “greet”. Phương thức này sẽ được chia sẻ bởi tất cả các đối tượng được tạo ra bằng cách sử dụng hàm xây dựng “Person”.

Để tạo ra một đối tượng mới từ hàm xây dựng “Person” và sử dụng phương thức “greet” ta có thể làm như sau:

Để tạo ra hai đối tượng “person1” và “person2” bằng cách sử dụng hàm xây dựng “Person” và gọi phương thức “greet” của mỗi đối tượng để in ra thông tin của nó.

3. Prototype trong javascript hoạt động như thế nào?

3.1 Kế thừa thuộc tính và phương thức:

Mỗi đối tượng trong JavaScript đều có một prototype, và các thuộc tính và phương thức của prototype này có thể được truy cập thông qua toán tử “.” của đối tượng. Nếu thuộc tính hoặc phương thức không tồn tại trên đối tượng hiện tại, JavaScript sẽ tìm kiếm chúng trong prototype. Nếu không tìm thấy, nó sẽ tiếp tục cho đến khi tìm thấy hoặc không còn prototype nào để tìm kiếm. Điều này cho phép đối tượng kế thừa các thuộc tính và phương thức từ một đối tượng khác

3.2 Tạo đối tượng thông qua hàm xây dựng (constructor function)

Khi một đối tượng được tạo ra thông qua một hàm xây dựng (constructor function), prototype của hàm này sẽ được sử dụng để tạo ra prototype của đối tượng mới. Điều này có nghĩa là các thuộc tính và phương thức được định nghĩa trên prototype của hàm xây dựng sẽ được chia sẻ giữa tất cả các đối tượng được tạo ra thông qua hàm đó. Khi ta muốn thêm một thuộc tính hoặc phương thức mới vào một đối tượng, ta có thể thêm nó vào prototype của hàm xây dựng.

3.3 Tạo đối tượng có tính đa hình (polymorphism)

Prototype cũng cho phép ta tạo ra các đối tượng có tính đa hình (polymorphism). Điều này có nghĩa là một đối tượng có thể được coi như một đối tượng của nhiều lớp khác nhau. Nếu một đối tượng có một phương thức cùng tên nhưng khác nhau về cách hoạt động so với phương thức có cùng tên prototype của nó, JavaScript sẽ sử dụng phương thức của đối tượng đó thay vì phương thức của prototype.

3.4 Kế thừa từ một đối tượng khác thông qua phương thức “Object.create()”

Trong JavaScript, prototype còn được sử dụng để thực hiện kế thừa từ một đối tượng khác thông qua phương thức “Object.create()”. Phương thức này tạo ra một đối tượng mới với prototype là đối tượng được truyền vào. Đối tượng mới này sẽ kế thừa tất cả các thuộc tính và phương thức từ prototype của đối tượng được truyền vào.

3.5 Cập nhật prototype sau khi tạo đối tượng

Prototype cũng cho phép ta cập nhật các thuộc tính và phương thức của đối tượng sau khi đối tượng đã được tạo ra. Điều này là do các đối tượng trong JavaScript được tham chiếu đến prototype của chúng, vì vậy nếu prototype được cập nhật, tất cả các đối tượng liên quan sẽ thể hiện các thay đổi đó.

3.6 Prototype chaining

Prototype cũng hỗ trợ prototype chaining, cho phép các đối tượng kế thừa các thuộc tính và phương thức từ nhiều prototype khác nhau. Trong trường hợp này, JavaScript sẽ tìm kiếm thuộc tính hoặc phương thức trên prototype đầu tiên, nếu không tìm thấy, nó sẽ tìm kiếm trên prototype thứ hai và tiếp tục tìm cho đến khi thấy hoặc không còn prototype nào để tìm kiếm.

4. Các lưu ý khi sử dụng prototype là gì?

Để sử dụng prototype đúng mục đích và đạt hiệu quả cao thì bạn cần chú ý những điều sau:

  • Trong Javascript một hàm sẽ được gọi là một object và hàm sẽ có thuộc tính prototype, bản thân thuộc tính prototype này lại mang giá trị của một object.
  • Nếu như bạn sử dụng hàm để tạo ra một mẫu nhằm khởi tạo đối tượng, thì việc thêm các thuộc tính hoặc phương thức vào thuộc tính prototype của hàm khởi tạo để tiến hành kế thừa hoàn toàn áp dụng được. Những đối tượng con được tạo ra bởi hàm khởi tạo đều sẽ mang giá trị có trong thuộc tính prototype của hàm này.
  • Những object trong Javascript sẽ được gọi với khái niệm prototype attribute. Đây là những đặc tính có giá trị trỏ tới prototype object mà nó được kế thừa thuộc tính. Khi đó, ta có thể sử dụng thuộc tính đó rồi truy cập tới prototype object.

Tạm kết

Trên đây là một số cách hoạt động của Prototype trong JavaScript. Prototype là một khái niệm quan trọng trong JavaScript và được sử dụng rất nhiều trong các thư viện và framework của JavaScript. Hiểu rõ về prototype sẽ giúp bạn nắm vững hơn về ngôn ngữ lập trình JavaScript. Theo dõi stringee.com ngay để cập nhật thêm các kiến thức thông tin hữu ích về công nghệ.