Prototype Là Gì? Cách Thiết Lập Prototype - Vietnix

Prototype là khái niệm cốt lõi trong JavaScript, nhưng đối với lập trình viên mới thì khái niệm này vẫn rất xa lạ. Tuy nhiên, những kiến thức này là kiến thức cốt lõi trong lập trình. Vậy prototype là gì và cách thiết lập như thế nào? Bài viết dưới đây sẽ giải đáp câu hỏi này cũng như các thông tin liên quan đến ngôn ngữ này nhé.

1. Prototype là gì?
2. Prototype của object
   1. Prototype chain
3. Cách thiết lập Prototype
   1. Sử dụng Object.create
   2. Sử dụng constructor
4. Prototype và sự kế thừa
5. Hướng dẫn sử dụng Prototype trong JavaScript
6. Câu hỏi thường gặp
   1. Tầm quan trọng của nguyên mẫu trong Javascript là gì?
   2. Khi nào nên sử dụng Prototype?
   3. Prototype trong mục đích khởi nghiệp là gì?
7. Lời kết

Prototype là gì?

Prototype là cơ chế để thực hiện mô hình OOP của ngôn ngữ lập trình JavaScript, mà các object (đối tượng) kế thừa các tính năng từ nhau. Mỗi một object trong Javascript đều có một thuộc tính nội bộ (internal property) gọi là prototype.

Ngôn ngữ này được liên kết với mọi hàm và object theo mặc định, trong đó thuộc tính prototype của hàm (function) có thể truy cập và sửa đổi được. Còn thuộc tính prototype của object thì invisible.

Đó là loại object đặc biệt có thể thể gắn các thuộc tính bổ sung vào, object này sẽ được chia sẻ trên tất cả các phiên bản của hàm khởi tạo.

Nói cách khác, prototype là một object trong JavaScript.

Prototype của object

Thuộc tính prototype của object là invisible. Để truy cập prototype object thì sử dụng phương thức Object.getPrototypeOf (obj) thay vì proto.

Prototype object bao gồm các thuộc tính và phương thức sau:

Thuộc tính	Mô tả
constructor	Trả về một hàm đã tạo.
__proto__	Đây là thuộc tính invisible của một object, sẽ trả về prototype object của một hàm mà được liên kết đến.

Phương thức của Prototype Object

Phương thức	Mô tả
hasOwnProperty()	Trả về một boolean cho biết liệu một object có chứa thuộc tính được chỉ định như một thuộc tính của object đó và không được kế thừa thông qua chuỗi prototype hay không.
isPrototypeOf()	Trả về một boolean cho biết liệu object được chỉ định có nằm trong chuỗi prototype của object mà phương thức này được gọi hay không.
propertyIsEnumerable()	Trả về một boolean cho biết thuộc tính được chỉ định có thể liệt kê được hay không.
toLocaleString()	Trả về string ở định dạng cục bộ.
toString()	Trả về string.
valueOf	Trả về giá trị của object được chỉ định.

Prototype chain

Cơ chế prototype chain rất đơn giản: Khi truy cập một thuộc tính p trên Object obj, JavaScript sẽ tìm kiếm thuộc tính này bên trong đối tượng obj. Nếu engine không tìm kiếm được, thì sẽ tiếp tục tìm kiếm trong nguyên mẫu của đối tượng obj,… cho đến khi đạt đến Object.Prototype. Nếu sau khi tìm kiếm kết thúc, và không có gì đã được tìm thấy kết quả sẽ không xác định. Ví dụ:

var obj1 = { a: 1, b: 2 }; var obj2 = Object.create(obj1); obj2.a = 2; console.log(obj2.a); // 2 console.log(obj2.b); // 2 console.log(obj2.c); // undefined

Trong đoạn code trên, câu lệnh var obj2 = object.create(obj1) sẽ tạo đối tượng obj2 với đối tượng Prototype obj1. Nói cách khác, obj1 trở thành prototype của obj2 thay vì Object.Prototype theo mặc định. Như vậy, b không phải là thuộc tính của obj2, vì vậy vẫn có thể truy cập thông qua prototype chain. Tuy nhiên, đối với thuộc tính c, sẽ có giá trị không xác định vì không thể tìm thấy trong obj1 và Object.Prototype.

Cách thiết lập Prototype

Có nhiều cách khác nhau để thiết lập prototype của một object trong JavaScript. Có hai cách phổ biến sau: Object.create() và constructor.

Sử dụng Object.create

Phương thức Object.create() tạo một object mới và cho phép chỉ định một object sẽ được sử dụng làm nguyên mẫu của đối tượng mới.

Ví dụ:

const personPrototype = { greet() { console.log('hello!'); } } const carl = Object.create(personPrototype); carl.greet(); // hello!

Khi tạo một object personPrototype, có phương thức great(). Sau đó, khi sử dụng Object.create() để tạo một đối tượng mới với personPrototype làm prototype của nó. Bây giờ có thể gọi great() trên đối tượng mới và prototype cung cấp việc triển khai nó.

Sử dụng constructor

Trong JavaScript, tất cả các hàm đều có thuộc tính có tên là prototype. Khi gọi một hàm như một constructor, thuộc tính này được đặt làm prototype của object mới được tạo (theo quy ước, trong thuộc tính có tên proto).

Vì vậy, nếu đặt prototype của một consrtructor, chúng ta có thể đảm bảo rằng tất cả các object được tạo bằng constructor tạo đó đều được cung cấp cho prototype đó:

const personPrototype = { greet() { console.log(`hello, my name is ${this.name}!`); } } function Person(name) { this.name = name; } Person.prototype = personPrototype; Person.prototype.constructor = Person;

Ở đây chúng ta tạo:

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

Sau đó, đặt thuộc tính prototype của hàm Person trỏ tới personPrototype.

Dòng cuối cùng (Person.prototype.constructor = Person;) đặt thuộc tính constructor của prototype cho hàm được sử dụng để tạo đối tượng Person. Đây là điều bắt buộc vì sau khi đặt Person.prototype = personPrototype;. Thuộc tính này trỏ đến constructor cho personPrototype là Object chứ không phải là Person ( vì personPrtotype được xây dựng như một object literal).

Sau code này, các object được tạo bằng Person() sẽ lấy personPrototype là prototype của mình.

Prototype và sự kế thừa

Đó là một tính năng mạnh mẽ và rất linh hoạt của JavaScript, tính năng này có thể giúp tái sử dụng code và kết hợp các object với nhau.

Đặc biệt, prototype còn hỗ trợ một phiên bản kế thừa. Tính kế thừa là một trong những đặc điểm nổi bật của Prototype.

Kế thừa là một tính năng của ngôn ngữ lập trình hướng đối tượng (OOP), cho phép người lập trình chứng minh ý tưởng “một số object trong hệ thống là phiên bản chuyên biệt hơn của các object khác”.

Ví dụ: Nếu bạn đang lập trình mô hình một trường học, trong trường học có giáo sư và học sinh. Cả hai đều là người, vì vậy đều có những đặc điểm giống nhau như cả hai đều có tên. Tuy nhiên, mỗi người sẽ có thêm các đặc điểm bổ sung như giáo sư thì có thêm bộ môn họ dạy. Trong hệ thống lập trình hướng đối tượng (OOP), chúng ta có thể nói rằng cả giáo sư và học sinh đều có những thuộc tính kế thừa từ mọi người.

Trong JavaScript, nếu các đối tượng Giáo sư và học sinh có thể có prototype Người (Person), thì chúng có thể kế thừa các thuộc tính chung. Đồng thời, thêm và xác định lại những thuộc tính cần khác nhau.

Hướng dẫn sử dụng Prototype trong JavaScript

Ngôn ngữ này cho phép người dùng dễ dàng xác định các phương thức cho tất cả các trường hợp của một object. Cái hay ở đây là phương thức được áp dụng cho prototype, vì vậy chỉ được lưu trữ trong bộ nhớ một lần, Tuy nhiên, mọi instance của object đều có quyền truy cập vào.

Ví dụ:

function Pet(name, species){ this.name = name; this.species = species; } function view(){ return this.name + " is a " + this.species + "!"; } Pet.prototype.view = view; var pet1 = new Pet('Gabriella', 'Dog'); alert(pet1.view()); //Outputs "Gabriella is a Dog!"

Trong hàm trên, chỉ bằng cách sử dụng prototype khi đính kèm phương thức xem, chúng ta đã đảm bảo rằng tất cả các object Pet đều có quyền truy cập vào phương thức xem. Bên cạnh đó, chúng ta có thể sử dụng phương pháp prototype để tạo ra nhiều hiệu ứng hơn.

Ví dụ: Chúng ta muốn có thêm object Dog, và object này kế thừa từng phương thức và thuộc tính được sử dụng tromg object Pet. Đồng thời, thiết lập một tính năng đặc biệt chỉ có object Dog mới có quyền truy cập.

function Pet(name, species){ this.name = name; this.species = species; } function view(){ return this.name + " is a " + this.species + "!"; } Pet.prototype.view = view; function Dog(name){ Pet.call(this, name, "dog"); } Dog.prototype = new Pet(); Dog.prototype.bark = function(){ alert("Woof!"); }

Trong hàm này, chúng ta đã thiết lập object Dog và gọi hàm Pet bằng phương thức call (). Phương thức call cho phép gọi một hàm đích cụ thể bên trong một đối tượng bằng cách truyền vào đối tượng muốn chạy hàm (được tham chiếu bởi ‘this’ ở dòng 10) theo sau là các đối số.

Sau đó, cấp cho object Dog một phương thức là bark (chỉ có các object Dog mới có quyền truy cập).

var pet1 = new Pet('Trudy', 'Bird'); var pet2 = new Dog('Gabriella'); alert(pet2.view()); // Outputs "Gabriella is a Dog!" pet2.bark(); // Outputs "Woof!" pet1.bark(); // Error

Ngôn ngữ này hoạt động theo một chuỗi. Khi gọi pet2.view(), trước tiên phải kiểm tra đối tượng Dog và Pet đã có phương thức xem nào hay chưa. Vì Dog kế thừa Pet, Pet kế thừa từ Object.prototype.

Object.prototype.whoAmI = function(){ alert("I am an object!"); } pet1.whoAmI(); //Outputs 'I am an object!' pet2.whoAmI(); //Outputs 'I am an object!'

Câu hỏi thường gặp

Tầm quan trọng của nguyên mẫu trong Javascript là gì?

Prototype Javascript hỗ trợ những cơ chế rất hữu ích phục vụ cho công việc lập trình. Dựa vào cơ chế kế thừa và khả năng truy cập những đối tượng, prototype in javascript có khả năng trở nên đa nhiệm và giúp cho lập trình viên trong rất nhiều công đoạn.

Khi nào nên sử dụng Prototype?

Hiện nay, tất cả các ngành nghề đều có thể sử dụng Prototype cho công việc của mình, trong đó đặc biệt là lĩnh vực công nghệ thông tin hoặc những công việc có thể bỏ ra chi phí thấp để tạo ra Prototype.

Prototype trong mục đích khởi nghiệp là gì?

Tương tự ngôn ngữ JavaScript, Prototype trong khởi nghiệp có thể hiểu là nguyên mẫu. Tuy nhiên, trong khởi nghiệp Prototype được sử dụng để phác thảo, định hình và hình dung những gì người dùng có thể nhìn thấy về sản phẩm.

Lời kết

Bài viết trên là những thông tin tổng hợp về prototype. Hy vọng với bài viêt này giúp bạn hiểu hơn về Prototype là gì? Cũng như hiểu rõ tầm quan trọng của prototype trong Javacript. Nếu có bất kỳ thắc mắc nào hãy để lại bình luận bên dưới để được hỗ trợ nhé.