Rate this post

Trong JavaScript, Prototype là một khái niệm quan trọng, đặc biệt là khi thực hiện lập trình hướng đối tượng (OOP). JavaScript là một ngôn ngữ dựa trên prototype, không sử dụng khái niệm lớp (class) như một số ngôn ngữ OOP khác. Bài viết này sẽ giúp bạn hiểu cách prototype hoạt động, cụ thể là khái niệm kế thừa (inheritance) trong JavaScript.

Prototype là gì?

Prototype là cơ chế mà trong JavaScript, các đối tượng kế thừa các tính năng từ một đối tượng khác. Mỗi đối tượng JavaScript đều có một prototype, và chúng kế thừa thuộc tính (properties) và phương thức (methods) từ prototype của mình.

Lưu ý rằng prototype chính là một đối tượng trong JavaScript, được gọi là “prototype object” (đối tượng prototype). Điều này quan trọng để không nhầm lẫn với thuộc tính prototype của một hàm (function).

Một số điều cần biết:

  • Trong JavaScript, một hàm cũng là một đối tượng. Hàm có một thuộc tính gọi là “prototype,” và thuộc tính prototype này chứa một đối tượng.
  • Nếu bạn sử dụng một hàm để tạo một mẫu khởi tạo đối tượng, bạn có thể thêm 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 được tạo bởi hàm khởi tạo này sẽ kế thừa các giá trị từ thuộc tính prototype của hàm đó.
  • Các đối tượng trong JavaScript có một thuộc tính gọi là “prototype attribute,” và thuộc tính này trỏ tới đối tượng prototype mà chúng kế thừa các thuộc tính từ. Để truy cập đối tượng prototype, bạn có thể sử dụng thuộc tính “proto.”

Xem thêm Thừa kế(Inheritance) trong Dart

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

Để tạo một prototype trong JavaScript, bạn có thể làm như sau:

// Khai báo một hàm khởi tạo (function)
function Person(_age, _name){
   this.age = _age;
   this.name = _name;
}

// Bạn 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 một instance của Person (đối tượng con)
var jack_person = new Person(10, "Jack");

// Đối tượng con này sẽ có 3 thuộc tính: age, name, và height
for (var att in jack_person){
   console.log(att);
}

// Để xem đối tượng prototype của instance vừa tạo
jack_person.__proto__;

Với ví dụ trên, bạn đã tạo một hàm khởi tạo là “Person,” và thuộc tính prototype của hàm này chứa thuộc tính “height.” Khi bạn tạo một đối tượng từ hàm này, nó sẽ kế thừa các thuộc tính age, name, và height.

Như vậy, prototype là một khái niệm quan trọng trong JavaScript, đặc biệt khi bạn làm việc với OOP và kế thừa.

Xem thêm kế thừa trong c++

Sự Quan Trọng của Prototype trong JavaScript

Prototype đóng một vai trò quan trọng trong JavaScript và thúc đẩy việc thực hiện sự kế thừa. Để thực hiện kế thừa trong JavaScript, bạn chỉ cần tạo một hàm khởi tạo và sau đó thêm thuộc tính và phương thức vào thuộc tính prototype của hàm khởi tạo đó.

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

Dưới đây là một ví dụ minh họa:

// Tạo một hàm khởi tạo cơ sở
function Animal(_age){
   this.age = _age;
}

// Bạn 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 một hàm khởi tạo con (được sử dụng để kế thừa hàm khởi tạo cơ sở)
function Dog(_color){
   this.color = _color;
}

// Thực hiện kế thừa bằng cách 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('màu vàng');
chophuquoc.age = 3;
chophuquoc.showAge();       // 3
chophuquoc.showColor();     // màu vàng

Như bạn có thể thấy, đối tượng “chophuquoc” sử dụng hàm “showAge()” từ prototype của “Animal,” bởi vì chúng ta đã gán hàm khởi tạo của “Animal” vào prototype của “Dog.” Điều này cho phép bạn thấy rõ cách sự kế thừa hoạt động trong JavaScript. Đối tượng “chophuquoc” đã kế thừa những thuộc tính của “Dog.prototype” và cũng kế thừa các thuộc tính có trong “Animal.prototype.”

Prototype rất quan trọng để truy cập các thuộc tính và phương thức của một đối tượng. Khi bạn truy cập một thuộc tính của một đối tượng, JavaScript sẽ tìm kiếm trong chính đối tượng đó. Nếu không tìm thấy, nó sẽ tiếp tục tìm kiếm trong prototype của đối tượng và tiếp tục cho đến khi đạt prototype của “Object” và kết thúc bằng việc trả về kết quả (undefined nếu không tìm thấy).

Quá trình này gọi là chuỗi prototype (prototype chain) trong JavaScript, và nó chính là thuộc tính prototype của hàm khởi tạo tạo ra cơ chế kế thừa dựa trên prototype cho JavaScript.

Xem thêm Kế thừa trong Swift

Ví dụ về các trường hợp sử dụng prototype

Ví dụ 1: Thêm phương thức mới cho built-in Array

// Thêm phương thức shuffle cho Array

Array.prototype.shuffle = function() {

  for (let i = this.length - 1; i > 0; i--) {

    const j = Math.floor(Math.random() * (i + 1));

    [this[i], this[j]] = [this[j], this[i]];

  }

  return this;

};

// Sử dụng phương thức mới

const numbers = [1, 2, 3, 4, 5];

console.log(numbers.shuffle()); // [3, 2, 5, 1, 4] hoặc [4, 1, 2, 5, 3] hoặc [1, 4, 2, 5, 3] ...

Ví dụ 2: Kế thừa từ lớp cha

// Lớp cha

function Person(name, age) {

  this.name = name;

  this.age = age;

}

Person.prototype.greet = function() {

  console.log(`Xin chào, tôi là ${this.name}`);

};

// Lớp con kế thừa từ lớp cha

function Student(name, age, major) {

  Person.call(this, name, age);

  this.major = major;

}

Student.prototype = Object.create(Person.prototype);

Student.prototype.constructor = Student;

// Sử dụng phương thức của lớp cha

const student = new Student("John", 20, "Computer Science");

student.greet(); // Xin chào, tôi là John

Ví dụ 3: Override phương thức từ lớp cha

// Lớp cha

function Shape() {}

Shape.prototype.draw = function() {

  console.log("Vẽ hình dạng chung");

};

// Lớp con override phương thức từ lớp cha

function Circle() {}

Circle.prototype = Object.create(Shape.prototype);

Circle.prototype.constructor = Circle;

Circle.prototype.draw = function() {

  console.log("Vẽ hình tròn");

};

// Sử dụng phương thức của lớp con

const shape = new Shape();

shape.draw(); // Vẽ hình dạng chung

const circle = new Circle();

circle.draw(); // Vẽ hình

Kết luận 

Prototype là một tính năng quan trọng của javascript, cho phép bạn thêm các thuộc tính và phương thức mới cho các đối tượng đã tồn tại, giúp tái sử dụng các đối tượng và giảm thiểu việc tạo các đối tượng mới. Tuy nhiên, cần lưu ý rằng sử dụng prototype không thể thay thế hoàn toàn cho việc sử dụng class trong javascript.

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 *

Contact Me on Zalo
Call now