Prototype Javascript: Định nghĩa & Cách thiết lập

  • 308 Lượt xem
  • 25/10/2023

Prototype Javascript: Định nghĩa & Cách thiết lập

Ngày viết: 2023-10-25 16:15:36

Bạn mới bắt đầu làm quen với lập trình Javascript? Prototype có lẽ là một khái niệm khá lạ lẫm. Tuy nhiên, đây lại là kiến thức nền tảng mà mọi lập trình viên Javascript cần nắm vững. Bài viết này của TVD Media sẽ giúp bạn hiểu rõ Prototype là gì và cách thiết lập Prototype một cách chi tiết nhất!

Prototype trong Javascript

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

Prototype là một cơ chế cho phép các lập trình viên hiện thực hóa mô hình OOP (Object-Oriented Programming - Lập trình hướng đối tượng) trong Javascript, trong đó các đối tượng có thể kế thừa lẫn nhau.

Hiểu một cách đơn giản, Prototype là một đối tượng đặc biệt, có thể được liên kết với các thuộc tính khác hoặc được chia sẻ giữa tất cả các phiên bản của một hàm. Nói cách khác, Prototype chính là "bản thiết kế" của một đối tượng trong Javascript.

Lưu ý quan trọng về Prototype:

  • Mọi đối tượng trong Javascript đều có một Prototype.
  • Prototype có thể là một đối tượng khác, hoặc null.
  • Khi bạn truy cập một thuộc tính của đối tượng, nếu thuộc tính đó không tồn tại trên đối tượng, Javascript sẽ tìm kiếm nó trong Prototype của đối tượng đó.

Phương pháp thiết lập Prototype

Có nhiều cách để thiết lập Prototype cho một đối tượng trong Javascript. Dưới đây là hai phương pháp phổ biến nhất:

Sử dụng Object.create() để tạo Prototype

Phương thức Object.create() cho phép chúng ta tạo một đối tượng mới, đồng thời chỉ định Prototype của đối tượng đó.

Ví dụ:

const personPrototype = {    greet() {        console.log('Xin chào!');    }};const carl = Object.create(personPrototype);carl.greet(); // Xin chào!    

Trong ví dụ trên, chúng ta tạo một đối tượng personPrototype với phương thức greet(). Sau đó, sử dụng Object.create() để tạo một đối tượng mới (carl) có Prototype là personPrototype. Kết quả là carl có thể gọi phương thức greet() mặc dù phương thức này không được định nghĩa trực tiếp trên carl.

Thiết lập Prototype với hàm tạo (Constructor Function)

Trong Javascript, tất cả các hàm đều có thuộc tính prototype. Khi chúng ta gọi một hàm bằng từ khóa new (hàm tạo), tất cả các thuộc tính của hàm này sẽ được gán vào Prototype của đối tượng mới.

Do đó, nếu chúng ta thiết lập Prototype cho hàm tạo, tất cả các đối tượng được tạo bởi hàm tạo đó sẽ có chung Prototype.

Ví dụ:

const personPrototype = {    greet() {        console.log(`Xin chào, tên tôi là ${this.name}!`);    }};function Person(name) {    this.name = name;}Person.prototype = personPrototype;Person.prototype.constructor = Person;const jane = new Person("Jane");jane.greet(); // Xin chào, tên tôi là Jane!    

Trong ví dụ này, chúng ta tạo một hàm tạo Person và gán personPrototype cho Person.prototype. Dòng Person.prototype.constructor = Person; đảm bảo rằng thuộc tính constructor của Prototype vẫn trỏ đến hàm tạo Person.

Prototype và Kế thừa (Inheritance)

Một trong những lý do quan trọng khiến Prototype trở nên đặc biệt là khả năng kế thừa. Prototype mang đến cơ chế kế thừa trong Javascript, điều mà Javascript ES5 còn thiếu.

Nhờ Prototype, các đối tượng được tạo bởi hàm tạo có thể kế thừa các phương thức và thuộc tính được định nghĩa trong Prototype. Đây là cách Javascript hiện thực hóa mô hình OOP.

Cách sử dụng Prototype trong Javascript

Prototype hoạt động thông qua hai cơ chế chính:

  1. Truy cập thuộc tính của đối tượng.
  2. Tìm kiếm thuộc tính trong Prototype của đối tượng.

Khi bạn cố gắng truy cập một thuộc tính của đối tượng, Javascript engine sẽ tự động tìm kiếm thuộc tính đó. Nếu thuộc tính tồn tại trực tiếp trên đối tượng, nó sẽ được trả về. Nếu không, Javascript sẽ tiếp tục tìm kiếm trong Prototype của đối tượng, và cứ tiếp tục như vậy cho đến khi tìm thấy thuộc tính hoặc đến khi Prototype là null.

Hy vọng bài viết này của TVD Media đã giúp bạn hiểu rõ hơn về Prototype trong Javascript và cách thiết lập Prototype. Nếu bạn cần tư vấn về thiết kế website, SEO website, chạy quảng cáo Google Ads, Facebook Ads, Tiktok Ads, Zalo Ads, hoặc các dịch vụ marketing online khác, hãy liên hệ với TVD Media qua số điện thoại +84966779629 hoặc truy cập website tvdmedia.vn.

Bài viết liên quan

Top 10 Phần Mềm Quản Lý Phụ Tùng Xe Tốt Nhất
Top 10 Phần Mềm Quản Lý Phụ Tùng Xe Tốt Nhất

Top 10 Phần Mềm Quản Lý Phụ Tùng Xe Tốt Nhất 2024 Sau một năm 2023 đầy kỷ lục, thị trường ô tô và xe máy Việt Nam đang trên đà phát triển mạnh ...

Vài giây trước
Thiết Kế Web Magento Ecommerce Chuyên Nghiệp
Thiết Kế Web Magento Ecommerce Chuyên Nghiệp

Thiết Kế Web Magento Ecommerce Chuyên Nghiệp - Giải Pháp Toàn Diện từ TVD Media Ngày đăng: 2024-07-12 16:06:41 Thiết kế web Magento với khả ...

Vài giây trước
15 Hosting Việt Nam Tốt Nhất [Năm Hiện Tại]
15 Hosting Việt Nam Tốt Nhất [Năm Hiện Tại]

15 Hosting Việt Nam Tốt Nhất [2024] Chọn một nhà cung cấp hosting đáng tin cậy là một bước quan trọng để xác định chất lượng trang web của bạn. Với ...

Vài giây trước
Diệt Virus Nhật Bản Cho Website Hiệu Quả Ngay
Diệt Virus Nhật Bản Cho Website Hiệu Quả Ngay

Diệt Virus Nhật Bản Cho Website Hiệu Quả Ngay Mặc dù đây không phải là một vấn đề phổ biến, website bị hack vẫn sẽ gây ra nhiều rắc rối cho ...

Vài giây trước
WordPress SEO: 10 Lý Do Chọn CMS Này!
WordPress SEO: 10 Lý Do Chọn CMS Này!

WordPress SEO: 10 Lý Do Chọn CMS Này! WordPress, với hàng triệu trang web trên toàn thế giới, đã chứng minh sức mạnh của mình trong việc thúc đẩy ...

Vài giây trước
Remote Job là gì? Khác biệt với Freelancer
Remote Job là gì? Khác biệt với Freelancer

Remote Job là gì? Khác biệt với Freelancer Ngày đăng: 2024-02-04 13:31:31 Trong những năm gần đây, hai khái niệm "Remote Job" (công việc từ ...

Vài giây trước
10 VPS Miễn Phí Tốt Nhất 2024 Chuyên Gia Khuyên Dùng
10 VPS Miễn Phí Tốt Nhất 2024 Chuyên Gia Khuyên Dùng

10 VPS Miễn Phí Tốt Nhất 2024 Chuyên Gia Khuyên DùngNgày viết: 2024-02-03 21:35:32Đối với những người muốn sử dụng dịch vụ VPS trong một thời gian dài ...

Vài giây trước
10 Ngôn Ngữ Lập Trình Dễ Học Nhất 2024 Cho Người Mới
10 Ngôn Ngữ Lập Trình Dễ Học Nhất 2024 Cho Người Mới

10 Ngôn Ngữ Lập Trình Dễ Học Nhất 2024 Cho Người Mới Lĩnh vực công nghệ phát triển đã thúc đẩy số lượng lập trình viên tăng nhanh hơn bao giờ ...

Vài giây trước
MVC là gì Ứng dụng thực tế trong lập trình
MVC là gì Ứng dụng thực tế trong lập trình

MVC là gì? Ứng dụng thực tế trong lập trình Bạn là một lập trình viên? Chắc hẳn bạn đã từng nghe đến mô hình MVC. Vậy mô hình MVC là gì? Ứng dụng ...

Vài giây trước
Top 10 Plugin Tạo Forum WordPress Tốt Nhất 2024
Top 10 Plugin Tạo Forum WordPress Tốt Nhất 2024

Top 10 Plugin Tạo Forum WordPress Tốt Nhất 2024 Diễn đàn là một công cụ xây dựng cộng đồng hiệu quả trên website, nơi khách truy cập có thể chia ...

Vài giây trước
Web Hosting Đa Chiều: Tốc Độ Cao, Bảo Mật Tuyệt Đối
Web Hosting Đa Chiều: Tốc Độ Cao, Bảo Mật Tuyệt Đối

Web Hosting Đa Chiều: Tốc Độ Cao, Bảo Mật Tuyệt Đối Đối với một trang web, hosting đóng vai trò quan trọng như nền tảng cho sự phát triển của ...

Vài giây trước
Top 5 Công Cụ Check Theme WordPress Tốt Nhất 2024
Top 5 Công Cụ Check Theme WordPress Tốt Nhất 2024

Top 5 Công Cụ Check Theme WordPress Tốt Nhất 2024 Bạn đang xem xét giao diện của các trang web WordPress khác và muốn tìm hiểu về theme họ đang ...

Vài giây trước
10 Dịch Vụ Bán Kèm Website TVD Media
10 Dịch Vụ Bán Kèm Website TVD Media

10 Dịch Vụ Bán Kèm Website TVD Media Khi sở hữu một website, nhiều người thường nghĩ rằng chỉ cần thiết kế đẹp và vận hành ổn định là đủ. Tuy ...

Vài giây trước
10 Dịch Vụ TVD Media Giúp Website Bùng Nổ Doanh Số
10 Dịch Vụ TVD Media Giúp Website Bùng Nổ Doanh Số

10 Dịch Vụ TVD Media Giúp Website Bùng Nổ Doanh Số Khi sở hữu một website, nhiều người thường nghĩ rằng chỉ cần thiết kế đẹp và vận hành ổn định ...

Vài giây trước
10 Dịch Vụ Tăng Trưởng Website Của TVD Media
10 Dịch Vụ Tăng Trưởng Website Của TVD Media

10 Dịch Vụ Tăng Trưởng Website Của TVD Media Khi sở hữu một website, nhiều người thường nghĩ rằng chỉ cần thiết kế đẹp và vận hành ổn định là đủ. ...

Vài giây trước
Perplexity AI: So sánh với ChatGPT từ TVD Media
Perplexity AI: So sánh với ChatGPT từ TVD Media

Perplexity AI: So sánh với ChatGPT từ TVD Media Trong thời đại thông tin ngập tràn trên internet như hiện nay, Perplexity AI là một công ...

Vài giây trước