Tìm hiểu về Prototype trong Javascript

Trong Javascript, khái niệm Prototype là một trong những đặc trưng quan trọng và cơ bản mà mọi lập trình viên học ngôn ngữ này cần phải nắm vững. Khái niệm này giúp Javascript trở thành một ngôn ngữ lập trình theo hướng đối tượng (OOP) dựa trên Prototype.

1. Khái niệm Prototype trong Javascript

Prototype là một cơ chế cho phép các đối tượng trong JavaScript thừa kế các thuộc tính và phương thức từ một đối tượng khác. Trong JavaScript, mỗi đối tượng và hàm đều có một thuộc tính đặc biệt là prototype.

1.1. Constructor function và Prototype

Khi bạn tạo một đối tượng bằng hàm khởi tạo (constructor function), các đối tượng này sẽ tự động thừa kế các thuộc tính và phương thức từ đối tượng prototype của hàm khởi tạo đó.

// vnengineer
function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.sayHello = function() {
    console.log('Hello, my name is ' + this.name);
};

const person1 = new Person('Alice', 25);
person1.sayHello();  // Output: Hello, my name is Alice

1.2. Prototype Chain

Prototype chain là hệ thống giúp JavaScript tìm kiếm các thuộc tính và phương thức trong chuỗi prototype của đối tượng. Nếu thuộc tính hoặc phương thức không tồn tại trong đối tượng hiện tại, JS sẽ tiếp tục tìm kiếm trong prototype của đối tượng đó cho đến khi tìm thấy hoặc không còn prototype nào khác.

2. Ví dụ cụ thể về Prototype

Hãy cùng xem một ví dụ khác để hiểu rõ hơn về cách hoạt động của prototype trong JavaScript.

// vnengineer
function Animal(name) {
    this.name = name;
}

Animal.prototype.eat = function(food) {
    console.log(this.name + ' is eating ' + food);
};

function Dog(name, breed) {
    Animal.call(this, name);
    this.breed = breed;
}

// Thừa kế từ Animal
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function() {
    console.log(this.name + ' is barking');
};

const dog1 = new Dog('Buddy', 'Golden Retriever');
dog1.eat('bone');  // Output: Buddy is eating bone
dog1.bark();       // Output: Buddy is barking

2.1. Kế thừa và mở rộng Prototype

Trong ví dụ trên, hàm khởi tạo Dog kế thừa từ hàm khởi tạo Animal, và thông qua cơ chế prototype, đối tượng dog1 có thể truy xuất được phương thức eat từ đối tượng Animal.

2.2. Thay đổi Prototype

Chúng ta có thể thay đổi prototype của một đối tượng sau khi nó đã được tạo, nhưng việc này cần phải cân nhắc kỹ để tránh gây ra các lỗi khó kiểm soát.

// vnengineer
const cat = {
    sound: 'meow'
};

const lion = Object.create(cat);
lion.sound = 'roar';
lion.roar = function() {
    console.log(this.sound);
};

lion.roar();  // Output: roar

Trong đoạn mã trên, đối tượng lion kế thừa thuộc tính sound từ đối tượng cat nhưng nó đã bị ghi đè.

Kết luận

Kết luận lại, Prototype là một khái niệm cốt lõi trong JavaScript giúp cung cấp cơ chế thừa kế và chia sẻ các phương thức và thuộc tính giữa các đối tượng. Việc nắm vững prototype giúp lập trình viên hiểu sâu hơn về cách hoạt động của JavaScript và xây dựng các ứng dụng theo hướng đối tượng một cách hiệu quả.