Đọc gì hôm nay

Prototype là gì? Cách tạo và sử dụng Prototype

Prototype là gì? Cách tạo và sử dụng Prototype
31
Th12

Đối với những người mới bắt đầu học lập trình, các khái niệm như Prototype hay JavaScript có thể vẫn còn mơ hồ. Tuy nhiên, đây là những kiến thức cơ bản mà lập trình viên cần nắm vững để phát triển kỹ năng lập trình hiệu quả. Bài viết này từ Vstar Agency sẽ giúp bạn hiểu rõ về Prototype và hướng dẫn chi tiết cách thiết lập nó!

Prototype là gì?

Prototype là một khái niệm quan trọng trong JavaScript, đại diện cho một mô hình kế thừa mà mọi đối tượng trong ngôn ngữ này đều có. Mỗi đối tượng trong JavaScript đều có thuộc tính ẩn gọi là [[Prototype]], cho phép nó chia sẻ thuộc tính và phương thức với các đối tượng khác. Khi bạn truy cập vào một thuộc tính hoặc phương thức của một đối tượng, nếu nó không tồn tại trong đối tượng đó, JavaScript sẽ tìm kiếm trong [[Prototype]] của nó. Quá trình này tiếp tục cho đến khi nó tìm thấy thuộc tính hoặc phương thức, hoặc đạt tới null.

Với Prototype, JavaScript hỗ trợ lập trình hướng đối tượng (OOP) theo một cách độc đáo. Điều này cho phép các đối tượng kế thừa các thuộc tính và phương thức từ các đối tượng khác, tạo ra một mô hình kế thừa linh hoạt và mạnh mẽ.

Prototype là gì?
Prototype là gì?

Các cách thiết lập ra Prototype

Có nhiều cách để thiết lập prototype trong JavaScript:

Sử dụng hàm tạo (Constructor Functions)

Hàm tạo là một trong những cách phổ biến nhất để định nghĩa prototype. Bạn có thể tạo ra một hàm tạo và thêm các phương thức vào prototype của nó. Ví dụ:

function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.sayHello = function() {
console.log(`Hello, my name is ${this.name}`);
};

Trong ví dụ này, phương thức sayHello được thêm vào prototype của hàm tạo Person. Mọi đối tượng được tạo ra từ Person sẽ có quyền truy cập vào phương thức này.

Sử dụng lớp (Classes)

Với ES6, JavaScript giới thiệu cú pháp lớp, giúp việc tạo prototype dễ dàng hơn. Cú pháp này cung cấp một cách trực quan để định nghĩa các phương thức và thuộc tính của một lớp.

class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a noise.`);
}
}

Ở đây, phương thức speak là một phương thức của lớp Animal, và mọi đối tượng được tạo từ lớp này sẽ tự động có quyền truy cập vào phương thức speak.

Sử dụng Object.create

Một cách khác để thiết lập prototype là sử dụng phương thức Object.create(). Phương thức này cho phép bạn tạo một đối tượng mới với một prototype cụ thể.

const animal = {
speak() {
console.log(`${this.name} makes a noise.`);
}
};
const dog = Object.create(animal);
dog.name = ‘Rex’;
dog.speak(); // Rex makes a noise.

Ở đây, đối tượng dog kế thừa phương thức speak từ đối tượng animal.

Sử dụng thuộc tính __proto__ 

Bạn cũng có thể thiết lập prototype của một đối tượng bằng cách sử dụng thuộc tính __proto__, mặc dù cách này không được khuyến khích vì có thể gây ra những tác động không mong muốn.

const animal = {
speak() {
console.log(`${this.name} makes a noise.`);
}
};
const cat = {
name: ‘Whiskers’
};
cat.__proto__ = animal;
cat.speak(); // Whiskers makes a noise.

Tại sao Prototype lại quan trọng trong JavaScript?

Prototype đóng một vai trò quan trọng trong JavaScript vì nhiều lý do:

Sự kế thừa

Một trong những điểm mạnh lớn nhất của prototype là khả năng kế thừa. Khi bạn sử dụng prototype, bạn có thể định nghĩa các thuộc tính và phương thức chung cho nhiều đối tượng mà không cần phải sao chép mã. Điều này giúp giảm thiểu việc trùng lặp mã và làm cho việc bảo trì mã trở nên dễ dàng hơn.

Ví dụ, nếu bạn có một lớp Vehicle với một phương thức start, bạn có thể kế thừa phương thức này cho các lớp con như Car và Bike mà không cần phải viết lại phương thức start cho từng lớp:

class Vehicle {

start() {

console.log(‘Vehicle started’);

}

}

class Car extends Vehicle {

// Car sẽ kế thừa phương thức start từ Vehicle

} class Bike extends Vehicle {

// Bike cũng sẽ kế thừa phương thức start từ Vehicle

}

Truy cập vào hệ thống

Khi bạn tạo ra một đối tượng trong JavaScript, bạn có thể truy cập vào hệ thống bằng cách sử dụng kế thừa qua prototype. Điều này cho phép bạn sử dụng lại các phương thức và thuộc tính mà không cần tạo ra từng đối tượng mới.

Tăng cường hiệu suất

Bằng cách sử dụng prototype, bạn có thể giữ cho mã của mình nhẹ hơn và nhanh hơn. Thay vì mỗi đối tượng có một bản sao của các phương thức, bạn chỉ cần một bản sao trong prototype. Điều này giúp tiết kiệm bộ nhớ và cải thiện hiệu suất.

Đơn giản hóa quản lý mã

Khi bạn sử dụng prototype, mã của bạn trở nên dễ đọc và dễ quản lý hơn. Việc định nghĩa các phương thức chung trong prototype giúp bạn dễ dàng thay đổi hoặc mở rộng mã mà không cần phải tìm kiếm và sửa đổi từng đối tượng.

Cách sử dụng Prototype trong JavaScript

Dưới đây là một số cách để sử dụng prototype trong JavaScript:

Thêm phương thức vào Prototype

Bạn có thể thêm các phương thức vào prototype bất cứ lúc nào, ngay cả sau khi đối tượng đã được định nghĩa:

Person.prototype.getOlder = function() {
this.age++;
};

Giờ đây, tất cả các đối tượng Person sẽ có phương thức getOlder.

Kế thừa từ Prototype

Bạn có thể kế thừa từ một prototype khác bằng cách sử dụng Object.create() hoặc cú pháp extends trong lớp.

class Dog extends Animal {
speak() {
console.log(`${this.name} barks.`);
}
}

Kiểm tra Prototype

Bạn có thể kiểm tra xem một đối tượng có phải là một instance của một prototype hay không bằng cách sử dụng instanceof

const myDog = new Dog(‘Buddy’);
console.log(myDog instanceof Dog); // true
console.log(myDog instanceof Animal); // true

Thay đổi thuộc tính Prototype

Bạn có thể thay đổi thuộc tính prototype để cập nhật hành vi cho tất cả các đối tượng đã được tạo ra từ nó.

Animal.prototype.speak = function() {
console.log(`${this.name} makes a sound.`);
};

Sử dụng các phương thức tĩnh

Ngoài việc thêm phương thức vào prototype, bạn cũng có thể định nghĩa các phương thức tĩnh cho lớp, mà không có quyền truy cập vào các instance.

class MathUtils {
static add(a, b) {
return a + b;
}
}
console.log(MathUtils.add(5, 10)); // 15

Prototype là một khái niệm cốt lõi trong JavaScript, cho phép bạn tạo ra các đối tượng với khả năng kế thừa và chia sẻ các thuộc tính và phương thức. Qua việc sử dụng prototype, bạn có thể xây dựng các ứng dụng linh hoạt, dễ bảo trì và mở rộng. Hiểu rõ về prototype giúp bạn khai thác tối đa sức mạnh của JavaScript trong việc phát triển các ứng dụng phức tạp, từ đó nâng cao hiệu suất và tính khả thi của mã nguồn.

Để lại một bình luận

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 *


Gọi điện ngay


0967066706