#03. Javascript hướng đối tượng – Prototype trong Javascript

Chào mừng các bạn đã quay trở lại với Series Javascript – The New World. Trong bài viết này tôi sẽ chia sẻ về một kiến thức rất quan trọng trong lập trình Javascript – đó là PROTOTYPE

  • Nếu các bạn đang muốn tìm hiểu “làm sao để thực hiện việc kế thừa trong Javascript?” thì PROTOTYPE sẽ là bộ RỄ để bạn phát triển.
  • Nếu các bạn xác định mình là một Javascript Dev thực thụ thì phải nắm chắc PROTOTYPE

Bây giờ, chúng ta bắt đầu nhé!

# Tại sao phải biết Prototype?

Prototype là một khái niệm rất rất rất cơ bản và là thành phần cốt lõi trong javascript. Việc nắm vững Prototype là cực kì quan trọng, việc phát triển một ứng dụng bằng mô hình hướng đối tượng thông qua ngôn ngữ Javascript đòi hỏi có rất nhiều Objects tương tác với nhau. Trong đó, có cả việc KẾ THỪA, đó cũng chính là lí do Javascript sinh ra Prototype, và điều quan trọng hơn hết tất cả các Objects trong Javascript đều kế thừa các Properties và Methods từ Prototype

# Vậy, Prototype là cái gì?

Về mặt kĩ thuật, Prototype là một Object bình thường trong Javascript nên ta gọi nó là Prototype Object (Tới đây bạn vẫn hiểu đúng không?). OK tiếp nè!

Tất cả các objects 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 CHÍNH NÓ. (Tới đây chắc phiêu phiêu rồi!). OK, chớ vội, xem ví dụ đã.

Các bạn chắc hẳn là đã biết các objects sau: Date, Array,Number hay Person

Các object trên đều chứa 1 property tên là: Date.prototype, Array.prototype, Number.prototype hay Person.prototype

Bên trên là tất cả các properties và methods đã được định nghĩa sẵn trong Date.prototype.Và có một điều đăc biệt chúng ta phải nhớ, Object.prototype chính là Prototype cao nhất, hay nói cách khác Object.prototype là CHA của tất cả các prototype => Tất cả các Object trong Javascript đều kế thừa từ Object.prototype

 

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

Khi các bạn muốn KẾ THỪA thì hãy sử dụng prototype.

Ví dụ: Ta định nghĩa một object có tên là Animal với 1 property là name và 1 method là move như sau

Bây giờ, ta muốn phân chia Animal thành 2 loại là DogBird nhưng vẫn giữ nguyên tất cả các properties và methods của Animal => Lúc này, ta thực hiện việc kế thừa.

function Dog(name){
	//Gọi constructor cha 
	Animal.call(this, name);
    //Định nghĩa method move kiểu Dog và viết ngay bên trong Object Dog
	this.move = function(){
    	document.write(this.name + ' is moving as a Dog 
'); } } function Bird(name){ //Gọi constructor cha Animal.call(this, name); } //Định nghĩa method fly viết thêm vào prototype của object Bird Bird.prototype.fly = function(){ document.write(this.name + ' is flying...
'); }

Ở bên trên, ta tạo ra Dog và Bird kế thừa Animal. Dog định nghĩa thêm method move ngay bên trong constructor function của nó và Bird thì định nghĩa thêm method trong prototype property. Xét về cú pháp thì khác nhau nhưng về bản chất thì cả 2 đều là 1. Full code của ví dụ này như sau:

# Prototype inheritance chain (Chuỗi kế thừa Prototype)

Prototype inheritance chain được hiểu như sau: Khi chúng ta truy cập vào một property của một object, JavaScript engine sẽ tìm property đó bên trong chính object, nếu không có nó sẽ 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).

Ví dụ: Chúng ta dùng lại ví dụ Animal, Dog, Bird bên trên nhé!

var lucky = new Dog("Lucky"); //Khởi tạo đối tượng 'lucky' thuộc kiểu Dog
lucky.move() //Lucky is moving as a Dog 

var sara = new Bird('Sara');
sara.move()//Sara is moving... 

Khi lucky gọi ‘move()‘ thì Javascript Engine sẽ tìm method move() trong Dog trước. OK, thấy method move trong Dog rồi => GỌI RA THÔI.

Khi sara gọi move thì Javascript Engine tìm mãi tìm hoài trong Bird không thấy nên đã tìm lên trên prototype của Animal…Lúc này, method move() được gọi từ Animal.

# Kết

Nói tóm lại:

  • Prototype là một khái niệm, là KHUÔN MẪU của 1 object và cũng chỉ là object bình thường trong Javascript.
  • Mỗi object trong Javascript đều chứa 1 property có tên là prototype.
  • Khi nào cần KẾ THỪA thì hãy dùng Prototype.
  • Tất cả các object trong Javascript đều kế thừa Object.prototype.
  • Khi 1 property hoặc 1 method được gọi, thì Javascript Engine sẽ tìm trong Prototype Inheritance Chain theo thứ tự từ dưới lên Object.prototype, nếu tìm thấy tại đâu thì sẽ gọi ra tại đó, nếu không tìm thấy thì sẽ xuất ra undefined.

Hy vọng các bạn nắm vững về Prototype, nếu có câu hỏi hay góp ý nào, hãy đừng ngại comment lại nhé! Hẹn gặp lại các bạn trong bài viết tiếp theo.

—————————————-

Nguồn tham khảo:

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *