Prototype là gì? Phân loại và cách thiết lập một prototype Javascript

Prototype là nền tảng kiến thức cốt lõi mà bạn cần biết khi tìm hiểu về lập trình. Nó cho phép bạn tạo ra các đối tượng và các hệ thống phân cấp một cách linh hoạt và hiệu quả. Bạn có muốn tìm hiểu sâu hơn về prototype không? Hãy theo dõi bài viết sau của LPTech nếu muốn muốn trở thành một lập trình viên JavaScript giỏi nhé!

Prototype trong Javascript là gì?

Prototype là một khái niệm cốt lõi trong JavaScript mà những ai muốn lập trình tốt cũng nên tìm hiểu. Nó được xem là một cơ chế quan trọng trong quá trình thực thi mô hình OOP có trong JavaScript. Hầu hết toàn bộ các đối tượng (object) trong Javascript đều sẽ có một prototype. Những object này sẽ có các thuộc tính (properties) và phương thức (methods) kế thừa từ một đối tượng khác.

Bản thân prototype là một object có trong JavaScript và được người dùng gọi là prototype object. Biết được điều này sẽ giúp bạn tránh được sự nhầm lẫn với thuộc tính prototype của function.

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

Khi đã biết được prototype là gì, bạn cũng nên biết thêm về cách thiết lập prototype. Hàm khởi tạo đối tượng cũng được xem là 1 đối tượng prototype, vì thế nên thực hiện khai báo một hàm khởi tạo cũng là cách giúp tạo ra prototype.

Bạn xem ví dụ dưới đây:

//Tạo ra 1 mẫu khởi tạo, cũng là tạo ra 1 prototype object
function infPerson(_age, _name, _address){
   this.age = _age;
   this.name = _name;
   this.address = _address;
}
 
//Có thể thêm thuộc tính vào thuộc tính prototype của hàm khởi tạo
infPerson.prototype.height = 0;
 
//Tạo ra 1 instance của Person
//Có cả 3 thuộc tính của mẫu khởi tạo Person
var person = new infPerson(10, "Khoa", "Da Nang");
for (var att in person){
   console.log(att);
}
 
//Xem đối tượng prototype của instance vừa tạo
person.__proto__;

Ví dụ trên cho bạn thấy đoạn code vừa nãy đã tạo ra được một hàm khởi tạo là hàm infPerson(_age, _name, _address). Thuộc tính prototype của hàm này chứa thuộc tính “height nên đối tượng được tạo bởi hàm này sẽ có 4 thuộc tính là: age, name, address và height. Nếu bạn vào prototype object của object vừa tạo ra thì bạn sẽ thấy object này chứa 1 hàm khởi tạo và 1 thuộc tính “height”.

Các loại prototype

Hi-fi prototype: Đây là dạng prototype khá nâng cao, thực hiện thông qua phần mềm chuyên dụng như Figma hoặc AdobeX. Những phần mềm này sẽ có các lệnh mô phỏng phản hồi hành động từ người dùng. Bạn sẽ tốn khá nhiều thời gian và công sức để thực hiện được Interactive Prototype. Hi-fi prototype còn được gọi là clickable prototype hoặc là interactive prototype.

Static Prototype: Đây là Prototype do con người mô phỏng, tức là sẽ có người đóng vai trò làm máy tính và phản hồi lại các hành động của người dùng. Người nhập vai và người trải nghiệm có thể ngồi cùng hoặc khác phòng. Hành động của người dùng sẽ được phản hồi lại bằng lệnh trên máy tính hoặc là bằng bản vẽ mô phỏng phản ứng.

Tầm quan trọng của prototype

Prototype có tầm quan trọng lớn trong việc lập trình, prototype trong Javascript cực kỳ đa nhiệm và giúp lập trình viên hoàn thành công việc một cách hiệu quả. Xem thông tin dưới đây để biết cụ thể tầm quan trọng của prototype là gì bạn nhé.

Kế thừa object và khả năng tái sử dụng code

Prototype thực hiện kế thừa object trong JavaScript, khi tạo object thì JavaScript sẽ tự động liên kết object với prototype để tạo thành một prototype chain. Chuỗi này giúp các object kế thừa những thuộc tính và phương thức từ prototype để tạo ra mối quan hệ phân cấp. Kế thừa các chức năng giúp thúc đẩy tái sử dụng code.

Nhờ vào các prototype mà bạn có thể code một cách gọn gàng hơn. Nó được xem là một tính năng hữu hiệu giúp lập trình viên xây dựng và mở rộng những ứng dụng phức tạp một cách hiệu quả.

Quản lý bộ nhớ hiệu quả

Với những ứng dụng hiệu suất cao thì việc tối ưu hóa bộ nhớ là điều rất quan trọng. Prototype sẽ có nhiệm vụ trong việc quản lý bộ nhớ bằng cách làm giảm mức tiêu thụ bộ nhớ. Khi người dùng thêm thuộc tính và phương thức vào prototype của một object thì chúng sẽ được chia sẻ cho tất cả instance của object đó. Các instance chỉ cần lưu dữ liệu của chúng nên sẽ tiết kiệm được bộ nhớ.

Tối ưu hóa hiệu suất

Prototype giúp tối ưu hóa hiệu suất các ứng dụng của JavaScript. Khi người dùng xác định thuộc tính và phương thức được chia sẻ trong prototype, JavaScript có thể thực hiện truy cập một cách hiệu quả hơn.

JavaScript đi theo prototype chain để tìm kiếm những chức năng được chia sẻ giúp cho quá trình truy cập được nhanh chóng hơn. Khả năng tối ưu hóa ngày càng được xem trọng đối với những ứng dụng năng độ.

Cách thức hoạt động của Prototype

Khi bạn truy cập vào một thuộc tính của một đối tượng, JavaScript sẽ tìm kiếm thuộc tính đó trong chính đối tượng đó. Nếu không tìm thấy, nó sẽ tiếp tục tìm kiếm ở prototype của đối tượng đó, rồi đến prototype của prototype đó, và cứ thế cho đến khi tìm thấy hoặc đến đối tượng Object.prototype (đối tượng prototype gốc của tất cả các đối tượng).

Cách bổ sung thuộc tính Prototype cho đối tượng

Đầu tiên, người dùng sẽ tạo lập object bằng hàm construction. Sau đó, người dùng tiến hành thêm thuộc tính Prototype cho hàm. Những thuộc tính này sẽ được chuyển đến Prototype object của hàm construction. Tức là quá trình này sẽ bao gồm 2 giai đoạn chính là: Hàm gửi yêu cầu cho constructor, constructor xử lý và trả về một instance.

Cách tìm kiếm prototype property của Javascript engines

Prototype cho phép người dùng tìm kiếm được prototype property một cách hiệu quả. Trước hết, người dùng cần truy cập vào thuộc tính của đối tượng nào đó. Javascript engines sẽ chạy tìm kiếm thuộc tính mà người dùng đang yêu cầu. Khi thuộc tính tồn tại thì kết quả sẽ được xuất ra ngay lập tức.

Trong trường hợp thuộc tính không tồn tại thì cơ chế này sẽ thực hiện kiểm tra thuộc tính của các đối tượng nguyên mẫu hoặc là đối tượng kế thừa. Khi quá trình rà soát thành công thì sẽ hiển thị thông tin về thuộc tính. Nếu vẫn không tìm thấy thì sẽ hiển thị kết quả là undefined.

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

Ngôn ngữ giúp người dùng xác định phương thức cho những trường hợp của object một cách dễ dàng hơn. Vì phương thức được dùng cho prototype nên sẽ chỉ lưu trữ một lần trong bộ nhớ. Nhưng tất cả instance của object sẽ đề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!"

Ở hàm trên, thông qua cách dùng prototype khi đính kèm phương thức xem, đảm bảo mọi object Pet đều có quyền truy cập vào phương thức xem. Ngoài ra, người dùng cũng có thể sử dụng phương pháp prototype nhằm mang đến nhiều hiệu ứng ấn tượng hơn.

Ví dụ: Người dùng muốn có thêm object Dog, object này kế thừa phương thức và thuộc tính được dùng trong object Pet. Ngoài ra, thiết lập một tính năng mà chỉ có object Dog mới truy cập được.

Ở hàm này, người dùng đã thiết lập object Dog, gọi hàm Pet thông qua phương thức call (). Phương thức call giúp gọi một hàm 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 (tham chiếu bởi ‘this’ tại dòng 10) theo sau là những đối số. Kế đến, cấp cho object Dog một phương thức bark (chỉ có những object Dog mới truy cập được).

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

Dạng ngôn ngữ này sẽ vận hành theo một chuỗi. Khi gọi pet2.view() thì phải kiểm tra đối tượng Dog và Pet có được phương thức xem nào hay chưa, do Dog kế thừa Pet và Pet kế thừa 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!'

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

Sau khi biết hướng dẫn sử dụng Prototype trong JavaScript, bạn cũng nên tìm thêm về cách ứng dụng Prototype. Prototype sẽ ẩn đi việc tạo đối tượng từ client, nên thay vì tạo ra một đối tượng không được thiết lập rồi trả về, nó sẽ tiến hành sao chép những giá trị có sẵn từ đối tượng kiểu mẫu và thực hiện tạo lập đối tượng mới dựa vào các phương thức trước đó.

Người dùng cần dùng đến iCloneable interface để thực hiện quá trình sao chép. Ứng dụng được dùng để sao chép phương thức, nó có sẵn trên những đối tượng kiểu mẫu. iCloneable interface sẽ dùng tính năng Clone thực hiện việc sao chép và trả về đối tượng, đây là bản sao của đối tượng gốc kiểu mẫu.

Người dùng cũng cần chú ý đến deep copy và shallow copy khi dùng đến chức năng Clone. Ưu điểm của Shallow copy là dễ dùng nhưng nó chỉ copy các thuộc tính của đối tượng kiểu mẫu. Deep copy tuy có chút phức tạp nhưng nó sẽ giúp người dùng sao chép mọi thuộc tính của các đối tượng. Những mẫu thiết kế của Prototype được sử dụng trong các lĩnh vực như đồ họa máy tính, CAD, GIS, trò chơi,...

Trên đây là những thông tin hữu ích về Prototype mà các lập trình viên nên tham khảo. Việc tối ưu được Javascript không chỉ giúp sản phẩm làm ra được mượt mà hơn mà còn có thể giúp ích rất nhiều trong các mặt khác của website. Nếu như bạn đang cần tìm một dịch vụ SEO vừa có khả năng làm nội dung, vừa mạnh về mảng tối ưu kĩ thuật thì hãy đến ngay với LPTech nhé.