Prototype là gì Update 04/2024

Mở đầu

Prototype là khái niệm cốt lõi cơ bản trong JavaScript khá quan trọng để thực thi OOP trong JavaScript. Vì JavaScript là một prototype-based language, không có khái niệm class như các ngôn ngữ hướng đối tượng khác hướng đối tượng khác. Trong bài viết này, ta sẽ tìm hiểu cách làm việc của prototype có thể hiểu nôm na là kế thừa (inheritance) ở javascript.

Bạn đang xem: Prototype là gì

Prototype là gì?

Prototype là cơ chế mà các object trong javascript kế thừa các tính năng từ một object khác. Tất cả các object trong javascript đều có một prototype, và các object này kế thừa các thuộc tính (properties) cũng như phương thức (methods) từ prototype của mình.

Bạn cần chú ý rằng bản thân prototype là một object trong JS, được gọi là prototype object (đối tượng prototype). Chúng ta cần biết điều này để tránh nhầm lẫn với thuộc tính prototype của function.

Đoạn ví dụ trên vừa tạo ra một function khởi tạo là hàm Person(_age, _name). Thuộc tính prototype của hàm này lại chứa thuộc tính height. Cho nên một object được tạo ra từ function khởi tạo này ta sẽ có 3 thuộc tính: age, name, và height.

Ta có thể truy cập prototype object của đối tượng vừa tạo (instance vừa tạo) để xem object này là một object chứa 1 hàm khởi tạo và 1 thuộc tính height.

Xem thêm: Dap Là Gì – điều Kiện Giao Hàng

Tại sao prototype lại quan trọng trong Javascript?

Sự kế thừa trong Javascript

Để thực hiện kế thừa trong Js, bạn chỉ cần tạo 1 hàm khởi tạo. Sau đó thêm các thuộc tính và phương thức vào thuộc tính prototype của hàm khởi tạo này.

Các instance tạo ra bởi hàm khởi tạo này sẽ chứa các thuộc tính và phương thức được định nghĩa ở trên. Do Javascript không có khái niệm class nên để thực hiện việc kế thừa để mở rộng ứng dụng như các ngôn ngữ OOP khác, chúng ta cần Prototype.

//Tạo ra 1 hàm khởi tạo cơ sởfunction Animal(_age){ this.age = _age;} //Có thể thêm thuộc tính vào thuộc tính prototype của hàm khởi tạoAnimal.prototype.showAge = function(){ console.log( this.age );}; //Tạo ra 1 hàm khởi tạo con (sẽ dùng để kế thừa hàm cơ sở)function Dog(_color){ this.color = _color;}//Thực hiện kế thừa, gán hàm khởi tạo của Animal cho prototype của DogDog.prototype = new Animal();Dog.prototype.showColor = function(){ console.log( this.color );}; //Kiểm tra sự kế thừavar chophuquoc = new Dog(“yellow”);chophuquoc.age = 3;chophuquoc.showAge(); //3chophuquoc.showColor(); //yellowĐoạn code trên thì object chophuquoc sử dụng hàm showAge() thuộc Animal prototype vì ta đã gán hàm khởi tạo của Animal vào prototype của Dog. Như vậy bạn có thể thấy rõ sự kế thừa trong js. Object chophuquoc đã kế thừa những gì đã có trong Dog.prototype và kế thừa luôn những thuộc tính mà Animal.prototype có.

Truy cập vào các thuộc tính của đối tượng: Prototype chain

Prototype rất quan trọng trong việc giúp ta truy cập tới các thuộc tính và phương thức của đối tượng. Khi chúng ta truy cập vào một Property của một Object, JavaScript sẽ tìm Property đó bên trong chính Object. Nếu không có nó sẽ tiếp tục tìm lên trên Prototype của Object và cứ tiếp tục như thế cho đến khi gặp Object.prototype thì dừng và cho ra kết quả (undefined nếu không tìm thấy).

Xem thêm: Tải Game Tom Và Jerry – Tom And Jerry: Chase Cho Android

Quá trình lặp lại này được gọi là chuỗi prototype (prototype chain) trong Javascript. Chính điều này cộng thuộc tính prototype của function tạo nên cơ chế kế thừa prototype-based cho Javascript.

Chuyên mục: Hỏi Đáp