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

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 trên một ngôn ngữ lập trình, trong đó các đối tượng (object) kế thừa các tính năng của nhau.

• Mọi đối tượng trong nền tảng Javascript đều có một thuộc tính bên trong, được gọi là Nguyên mẫu.
• Theo mặc định, ngôn ngữ này sẽ được liên kết với tất cả các chức năng và đối tượng. Thuộc tính nguyên mẫu của hàm cho phép lập trình viên truy cập và sửa đổi, làm cho thuộc tính nguyên mẫu của đối tượng trở nên vô hình.

Nguyên mẫu là một loại đối tượng đặc biệt có thể được gắn vào các thuộc tính bổ sung, cũng được chia sẻ bởi tất cả các phiên bản của hàm tạo. Nói một cách đơn giản, Prototype là một đối tượng dựa trên JavaScript.

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

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

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

Có nhiều cách để thiết lập nguyên mẫu của đối tượng trong JavaScript. Trong đó có 2 cách phổ biến, thường được sử dụng là: Đối tượng.tạo ( ) Và người xây dựng.

Đặt Nguyên mẫu bằng Object.create ( )

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

Hãy xem xét ví dụ dưới đây:

const personPrototype = {

chào() {

console.log(‘xin chào!’);

}

}

const carl = Object.create(personPrototype);

carl.greet(); // Xin chào!

Khi bạn tạo một đối tượng personPrototype, có một phương thức ( ) tuyệt vời. Tiếp theo, bạn sử dụng Object.create() để tạo một đối tượng mới với personPrototype để tạo nguyên mẫu cho nó. Tại thời điểm này, bạn có thể gọi tuyệt vời ( ) đối tượng mới và nguyên mẫu cung cấp triển khai của nó.

Đặt Nguyên mẫu với hàm tạo

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

Do đó, nếu bạn tạo nguyên mẫu cho một hàm tạo, bạn có thể đảm bảo rằng tất cả các đối tượng được tạo bằng hàm tạo đều được cung cấp cho nguyên mẫu đó.

Ví dụ:

const personPrototype = {

chào() {

console.log(`xin chào, tên tôi là ${this.name}!`);

}

}

chức năng Người (tên) {

this.name = tên;

}

Person.prototype = personPrototype;

Person.prototype.constructor = Người;

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

• Một đối tượng Nguyên mẫu người với phương thức tuyệt vời().
• Hàm tạo person ( ), nó khởi tạo tên của người được tạo.

Sau đó, chúng tôi đặt thuộc tính nguyên mẫu trong hàm Person, trỏ đến personPrototype. Ở dòng cuối cùng, ( Person.prototype.constructor = Person;), chúng ta đặt thuộc tính hàm tạo của nguyên mẫu thành hàm được sử dụng để tạo các đối tượng Person. Đây là điều bắt buộc bởi vì sau khi thiết lập Person.prototype = person Protoptype, thuộc tính này trỏ đến hàm tạo cho person Nguyên mẫu là Đối tượng chứ không phải Người.

Protoptype với tính năng kế thừa

Điều khiến 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, Protoptype mang tính kế thừa trong nền tảng JavaScript.

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

• Để có thể duy trì khả năng này, lập trình viên cần sử dụng Prototype. Theo đó, cơ chế dựa trên nguyên mẫu sẽ được tạo ra để làm nền tảng cho tính chất này.
• Bên cạnh đó, để thực hiện thao tác kế thừa, lập trình viên phải khởi tạo một hàm.
• Tiếp theo, thêm vào hàm đó các thuộc tính và phương thức chứa thuộc tính Nguyên mẫu cho hàm bạn vừa khởi tạo.

Instance được tạo từ hàm tạo sẽ chứa các phương thức và thuộc tính được xác định trước theo ý muốn của mọi người. Prototype cũng là phương pháp 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 Nguyên mẫu trong JavaScript

Về mặt lý thuyết, Prototype sẽ có 2 cách thức hoạt động bao gồm thêm thuộc tính Prototype vào đối tượng và tìm thuộc tính Prototype của JavaScript engine.

• Với thao tác đầu tiên, lập trình viên khởi tạo đối tượng theo cách thông thường. Bạn có thể thêm chủ đề của một số thuộc tính khác vào hàm.
• Cách làm việc thứ hai, để tìm ra thuộc tính Prototype, người ta phải truy cập vào thuộc tính của đối tượng.

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

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