Prototype là gì? Cách thiết lập Prototype trong Javascript

Những newbie mới bước chân vào con đường ngôn ngữ lập trình thì những khái niệm như Prototype hay Javascript chắc hẳn vẫn còn xa lạ. Mặc dù vậy nhưng đây là những kiến thức cốt lõi mà lập trình viên cần phải nắm chắc nếu muốn lập trình tốt. Bài viết này của Mona Media sẽ giúp các bạn hiểu rõ Prototype là gì và cách thiết lập Prototype chi tiết nhất!

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

Prototype là cơ chế để lập trình viên thực hiện mô hình OOP trong ngôn ngữ lập trình, trong đó các object (đối tượng) lại được kế thừa các tính năng của nhau.

• Mỗi một object trong nền tảng Javascript đều có thuộc tính nội bộ (internal property), đó được gọi là Propotype.
• Ngôn ngữ này sẽ được liên kết với mọi hàm cùng object theo mặc định. Thuộc tính propotype của hàm cho phép lập trình viên truy cập và sửa đổi, cong thuộc tính prototype của object là vô hình (invisible).

Prototype là loại object đặc biệt, có thể gắn vào đó các thuộc tính bổ sung, nó cũng được chia sẻ tại tất cả các phiên bản của hàm khởi tạo. Hiểu theo cách đơn giản thì Prototype là một Object thuộc nền tảng JavaScript.

Tuy nhiên, có một vài điều cần lưu ý về Prototype như sau:

• Một hàm (fuction) trong Javascript cũng được tính là 1 object. Tất nhiên, hàm có một thuộc tính cũng là thuộc tính Prototype vì bản chất thuộc tính này mang giá trị là object.
• Khi sử dụng một hàm mẫu để khởi tạo đối tượng thì chúng ta được phép thêm thuộc tính, phương thức vào thuộc tính prototype của hàm khởi tạo để thực hiện kế thừa. Tất cả đối tượng con được tạo ra từ hàm khởi tạo đều chứa các giá trị trong thuộc tính prototype của hàm này.
• Object trong nền tảng Javascript còn có một khái niệm khác là prototype attribute. Giá trị của đặc tính này trỏ tới prototype object mà nó kế thừa thuộc tính. Mọi người sử dụng thuộc tính _proto_ để truy cập prototype object.

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 ( )

Phương thức Object.create ( ) giúp chúng ta tạo ra một object mới. Nó chỉ cho phép bạn chỉ định một object sẽ làm nguyên mẫu cho các đối tượng mới.

Xét ví dụ dưới đây:

const personPrototype = {

greet() {

console.log(‘hello!’);

}

}

const carl = Object.create(personPrototype);

carl.greet(); // hello!

Khi các bạn tạo ra một object personPrototype, thì có phương thức great ( ). Tiếp theo, bạn sử dụng Object.create ( ) để tạo ra một đối tượng mới với personPrototype để làm prototype cho nó. Tới đây, các bạn có thể gọi great ( ) là đối tượng mớ còn prototype cung cấp việc triển khai nó.

Thiết lập Prototype bằng constructor

Trong nền tảng JavaScript thì toàn bộ các hàm đều có chung một thuộc tính là prototype. Khi chúng ta gọi hàm như một constructor thì tất cả thuộc tính của hàm này được đặt thành prototype của object mới được tạo (dựa trên quy ước, trong thuộc tính có tên gọi prototype).

Do đó, nếu các bạn đặt prototype cả một constructor thì mọi người có thể đảm bảo được việc tất cả các object đã được tạo bằng constructor đều được cung cấp cho prototype đó.

Ví dụ:

const personPrototype = {

greet() {

console.log(`hello, my name is ${this.name}!`);

}

}

function Person(name) {

this.name = name;

}

Person.prototype = personPrototype;

Person.prototype.constructor = Person;

Ở trên, chúng ta đã tạo:

• Một object person Prototype với phương thức great ().
• Một hàm khởi tạo person ( ), nó khởi tạo tên của người cần tạo.

Sau đó, chúng ta đặt thuộc tính prototype ở hàm Person, trỏ tới personPrototype. Tại dòng cuối cùng, ( Person.prototype.constructor = Person;), ta đặt thuộc tính constructor của prototype cho hàm được sử dụng để tạo ra các đối tượng Person. Đây là điều bắt buộc phải có vì sau khi đã đặt Person.prototype = person Protoptype thì thuộc tính này trỏ tới constructor cho person Prototype là Object chứ không phải là Person.

Protoptype cùng tính năng kế thừa

Điều khiến cho Prototype trở nên đặc biệt chắc chắn là tình kế thừa của nó. Thuộc tính này thực sự quan trọng và cần thiết cho Protoptype. Như đã đề cập ở trên thì Protoptype đem tới sự kế thừa trong nền tảng JavaScript.

Đây cũng là điều duy nhất vì Javascript ở phiên bản ES5 đổ về trước không được trang bị khái niệm class. Cũng do đó mà Javascript sẽ không thể kế thừa cũng như mở rộng ứng dụng của nó theo ngôn ngữ OOP.

• Để có thể duy trì được khả năng này, các lập trình viên cần phải sử dụng tới Prototype. Theo đó, cơ chế prototype-based sẽ được tạo giống như một nền tảng dành cho thuộc tính này.
• Bên cạnh đó, để tiến hành hoạt động kế thừa thì người lập trình phải khởi tạo nên một hàm.
• Tiếp theo là thêm vào hàm đó những thuộc tính, phương thức có chứa thuộc tính Prototype cho hàm bạn vừa khởi tạo.

Instance được tạo ra từ hàm khởi tạo sẽ chứa những phương thức, thuộc tính đã được định nghĩa sẵn theo mong muốn của mọi người. Prototype cũng là phương thức duy nhất để mọi người thực hiện kế thừa, mở rộng ngôn ngữ OOP trong javascript.

Cách sử dụng Prototype trong JavaScript

Dựa theo lý thuyết, Prototype sẽ có hai cách hoạt động gồm bổ sung thuộc tính Prototype cho object và tìm Prototype property của JavaScript engines.

• Với cách hoạt động thứ nhất, lập trình viên khởi tạo object theo cách thông dụng. Bạn có thể thêm các theme của một số thuộc tính khác vào hàm.
• Cách hoạt động thứ hai, để tìm ra Prototype property thì mọi người phải truy cập vào thuộc tính của đối tượng.

Hoàn thành xong, JavaScript engines sẽ tự động đi tìm thuộc tính mà mọi người yêu cầu. Nếu như thuộc tính đó có trong chương trình thì nó sẽ xuất hiện ngay và ngược lại.

Bài viết ngắn gọn mà chi tiết của Mona Media chắc hẳn đã giúp bạn hiểu được Prototype là gì và cách thiết lập Prototype. Hy vọng bạn đọc có thể vận dụng những thông tin này để có sự vận dụng tốt hơn trong quá trình chinh phục ngôn ngữ Javascript của mình.

Tham khảo:

• Top ngôn ngữ lập trình phần mềm tốt nhất hiện nay
• Tìm hiểu cơ bản về ngôn ngữ lập trình Java