Prototype là thuật ngữ trong JavaScript, trong ngành công nghiệp nói chung prototype không còn quá xa lạ. Vậy Prototype là gì? Prototype đóng vai trò quan trọng gì trong JavaScript? Để nắm vững những kiến thức cốt lõi của Prototype, bạn hãy cùng công ty thiết kế website Cánh Cam tìm hiểu thông qua bài viết dưới đây nhé!
1. Tìm hiểu Prototype là gì?
Prototype là gì? Prototype là những bản mẫu thử nghiệm đầu tiên của một phần mềm hoặc một giao diện. Mẫu thử nghiệm này cho phép người dùng thao tác trực tiếp trên chính giao diện thiết kế thử nghiệm trước khi chúng được sử dụng chính thức.
Prototype sẽ cho mang lại thử nghiệm gần giống 90% so với bản chính thức, các thao tác kéo, nhấn thả, trượt, mở popup,… giúp mang lại trải nghiệm chân thật nhất. Prototype giúp mô phỏng lại các thao tác trải nghiệm của người dùng, từ đó phát hiện kịp thời các lỗi có thể xảy ra trước khi chuyển bản thiết kế sang cho đội ngũ code để xây dựng.
Prototype giúp truyền đạt các mong muốn của khách hàng một cách chính xác. Các bạn coder dễ dàng hiểu được các ý tưởng và triển khai giao diện một cách hoàn chỉnh nhất.
>> Xem thêm Java là gì? Tổng quan về khái niệm, lợi ích, cách hoạt động của Java
>> Xem thêm CSS là gì? Bố cục, cấu trúc và cách nhúng vào website
>> Xem thêm Python là gì? Tổng quan về ngôn ngữ lập trình Python
2. Một số cách thiết lập Prototype trong JavaScript
Dưới đây là 2 cách thiết lập phổ biến nhất khi tạo prototype trong JavaScript.
2.1 Thiết lập Prototype với constructor
Tất cả các thuộc tính đều có hàm trong JavaScript có tên là Prototype. Gọi constructor là hàm thì tất cả thuộc tính của hàm đều trở thành prototype của object mới được tạo. Dựa vào quy ước thì thuộc tính được gọi là prototype. Do đó, nếu đặt prototype cho một constructor, cần đảm bảo tất cả các object đều được tạo từ constructor liên kết bằng prototype đó.
Như ví dụ ở trên, chúng ta đã có:
- Một object.personProtortype từ phương thức great().
- Một hàm mở đầu tạo person ( ), khởi tạo tên của người cần tạo.
Tiếp theo, chúng ta trỏ thuộc tính prototype của hàm person vào personPrototype. Ở dòng (Person.prototype.constructor = person;) vị trí cuối cùng, ta đặt thuộc tính constructor của prototype cho hàm để tạo ra đối tượng Person. Đây là bước không thể thiếu vì khi đặt Person.prototype = personPrototype; thì thuộc tính sẽ được trỏ đến constructor cho personPrototype (đây là object không phải là Person vì personPrototype được tạo ra như một object literal)
2.2 Thiết lập Prototype với Object.create
Đây là tính năng đặc biệt của JavaScript bởi sự linh hoạt và mạnh trong việc tái sử dụng code và liên kết các object lại với nhau. Đối với các phiên bản cũ ES5 trở về trước thì JavaScript sẽ không trang bị khái niệm class. Do đó mà JavaScript sẽ không còn mở rộng ứng dụng cũng như kế thừa theo ngôn ngữ OPP
- Vì vậy, để thiết lập prototype với object.create thì cần phải thiết lập theo cơ chế prototype-based.
- Trước khi tạo object.create thì người lập trình cần phải tạo một hàm trước.
- Sau khi tạo hàm sẽ thêm các thuộc tính và phương thức có chứa thuộc tính prototype vào hàm vừa tạo.
Instance tạo ra các hàm có chứa những phương thức, thuộc tính tạo theo yêu cầu và mong muốn của mọi người. Duy nhất chỉ Prototype là có phương thức kế thừa từ đó mọi người dễ dàng mở rộng ngôn ngữ OOP trong JavaScript.
3. Hướng dẫn sử dụng Prototype trong JavaScript
Thông thường, Prototype sẽ hoạt động theo 2 cách nhằm bổ sung thuộc tính prototype của object và tìm kiếm prototype property của JavaScript engines.
- Cách 1: các lập trình viên sẽ tạo một object theo những cách thông dụng. Bạn cũng có thêm các giao diện của thuộc tính khác vào hàm.
- Cách 2: để tìm prototype property cần phải truy cập vào thuộc tính của một đối tượng nhất định.
Sau khi hoàn thành 2 cách trên, JavaScript engines sẽ thiết lập tự động tìm kiếm các thuộc tính được yêu cầu. Nếu chương trình đó có thuộc tính thì nó sẽ tự động xuất hiện và ngược lại.
4. Tại sao Prototype đóng vai trò quan trọng với JavaScript
4.1 Tính năng kế thừa của Prototype
Sau khi tạo một hàm khởi tạo, bạn sẽ thực hiện được các thao tác kế thừa Prototype trong JavaScript. Từ đó, thêm vào các phương thức, thuộc tính cho thuộc tính prototype của hàm khởi tạo. Instance được tạo từ hàm khởi tạo sẽ chứa các phương thức, thuộc tính trên.
Như ví dụ trên ta có thể thấy ở mục object (chophuquoc) sử dụng hàm ( showAge() ) thuộc Animal prototype, vì ta đã gắn hàm khởi tạo Animal cho prototype cho (Dog). Từ đó, ta có thể thấy tính năng kế thừa trong JavaScript object (chophuquoc) kế thừa trong (Dog.prototype) và kế thừa luôn thuộc tính (Animal.prototype).
4.2 Prototype Chain – truy cập vào các thuộc tính của đối tượng
Prototype đóng vai trò quan trọng giúp truy cập vào các thuộc tính, phương thức của đối tượng một cách dễ dàng. Khi truy cập vào thuộc tính, phương thức của một object, JavaScript lập tức tìm một property trong chính object đó. Nếu không tìm thấy, nó vẫn tiếp tục tìm kiếm trên prototype của object cho đến khi tìm được object.prototype. Từ đó sẽ cho ra kết quả, nếu kết quả là undefined nghĩa là không tìm thấy.
Quá trình tìm kiếm lặp đi lặp lại này được gọi là prototype chain (chuỗi prototype) trong JavaScript. Đây chính là việc tạo nên cơ chế kế thừa prototype-based trong JavaScript.
Như ví dụ thì object.create sẽ tạo ra một object mới là obj2 từ prototype là obj1. Tuy object obj2 không có property a, nhưng vẫn có thể tiếp tục truy cập nhờ vào cơ chế chuỗi prototype.
Trên đây là những kiến thức định nghĩa về prototype là gì và các khái niệm tổng quan về prototype. Cánh Cam mong rằng bạn sẽ áp dụng được những thông tin này trong ngôn ngữ lập trình JavaScript.
>> Xem thêm Thiết kế website bán hàng cần lưu ý điều gì ?
Giữ vai trò lãnh đạo trong công ty, tôi mong muốn góp phần gia tăng cơ hội cạnh tranh thương hiệu Việt thông qua cánh cửa thần kỳ internet.
