Breaking News
wp thumb 58

Javascript Prototype là gì? Tạo ra Prototype như thế nào? | TopDev

Mở đầu

Prototype là khái niệm cốt lõi chủ công 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.

Prototype là gì?

Prototype là cơ chế mà các object trong javascript kế thừa các chức 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 đang xem: Javascript Prototype là gì? Tạo ra Prototype như thế nào? | TopDev

Bạn cần cẩn thận 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.

Vài điều cần lưu ý:

Xem thêm: Thứ Sáu Đen (mua sắm) black friday là ngày gì

  1. Trong Javascript, một hàm (function) cũng được coi là 1 object. Và hàm có một thuộc tính gọi là thuộc tính prototype, bản thân thuộc tính prototype này mang giá trị là 1 object.
  2. Nếu ta dùng hàm để tạo ra 1 mẫu khởi tạo đối tượng, thì game thủ có thể thêm được các thuộc tính hoặc phương thức vào thuộc tính prototype của hàm khởi tạo để thực hiện kế thừa. Tất cả các đối tượng con tạo ra bởi hàm khởi tạo đều mang các giá trị trong thuộc tính prototype của hàm này.
  3. Các object trong Javascript có một khái niệm gọi là prototype attribute, đặc tính này có giá trị trỏ tới prototype object mà nó kế thừa thuộc tính. Ta dùng thuộc tính __proto__ để truy cập tới prototype object.

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

Ta khai báo một hàm khởi tạo:

//Tạo ra 1 mẫu khởi tạo, cũng là tạo ra 1 prototype object function Person(_age, _name) this.age = _age; this.name = _name;  //Có thể thêm thuộc tính vào thuộc tính prototype của hàm khởi tạo Person.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 jack_person = new Person(10, "Jack"); for (var att in jack_person) console.log(att);  //Xem đối tượng prototype của instance vừa tạo jack_person.__proto__;

Javascript Prototype là gì? Tạo ra Prototype như thế nào? | TopDev

Đ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.

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, người chơi 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.

Xem thêm: Điểm GPA là gì? 3 thang điểm GPA được sử dụng tại Việt Nam và cách quy đổi – Trung Tâm du học Hàn Quốc Sunny

//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ạo Animal.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 Dog Dog.prototype = new Animal(); Dog.prototype.showColor = function() console.log( this.color ); ; //Kiểm tra sự kế thừa var chophuquoc = new Dog('yellow'); chophuquoc.age = 3; chophuquoc.showAge(); //3 chophuquoc.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 game thủ 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).

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.

Có thể bạn muốn xem thêm:

  • TypeScript thoáng qua
  • Javascript prototype chuyên sâu
  • JavaScript Closures là gì?

Xem thêm việc làm JavaScript hấp dẫn lương cao tại TopDev!

Nguồn: https://fusionsuitesvungtau.com.vn
Danh mục: Hỏi đáp ✅

Check Also

trang web aliexpress la gi cua nuoc nao va co uy tin khong 1 1

Trang web Aliexpress là gì, của nước nào và có uy tín không?

Trang web Aliexpress là gì, của nước nào và có uy tín không? Bạn sẽ được tìm hiểu cùng Giaonhan247 qua bài chia sẻ thiết thực sau đây.

Contact Us