Cách sử dụng Lớp (Classes) trong JavaScript
Javascript nâng cao | by
Trong JavaScript, Lớp (Class) là một khái niệm quan trọng được giới thiệu từ ES6, giúp lập trình hướng đối tượng trở nên rõ ràng và dễ quản lý hơn. Trước đây, JavaScript chủ yếu sử dụng hàm tạo (constructor functions) và prototype để tạo và kế thừa đối tượng. Tuy nhiên, với sự ra đời của class, việc định nghĩa và mở rộng các đối tượng đã trở nên trực quan hơn, giúp mã nguồn dễ đọc và bảo trì.
Class đóng vai trò quan trọng trong việc tổ chức mã nguồn, tái sử dụng code, và mở rộng chương trình. Việc hiểu cách sử dụng class giúp lập trình viên viết code có cấu trúc tốt hơn, dễ dàng quản lý các đối tượng phức tạp và hỗ trợ các mô hình thiết kế hướng đối tượng (OOP) hiệu quả hơn trong JavaScript.
Class trong JavaScript là gì?
.png)
Class trong JavaScript là một khuôn mẫu (blueprint) để tạo ra các đối tượng. Nó giúp tổ chức mã nguồn theo mô hình hướng đối tượng (OOP), giúp việc quản lý và mở rộng chương trình trở nên dễ dàng hơn.
So sánh class với constructor function (hàm tạo truyền thống)
Trước khi class được giới thiệu trong ES6, JavaScript sử dụng constructor function và prototype để tạo đối tượng và kế thừa phương thức. Tuy nhiên, cách này có cú pháp phức tạp và ít trực quan.
Ví dụ sử dụng constructor function:
function Person(name, age) {
this.name = name;
this.age = age;
}
// Thêm phương thức vào prototype
Person.prototype.greet = function () {
console.log(`Xin chào, tôi là ${this.name}`);
};
const person1 = new Person("An", 25);
person1.greet(); // Xin chào, tôi là An
Sử dụng class, cú pháp sẽ gọn gàng hơn:
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(`Xin chào, tôi là ${this.name}`);
}
}
const person2 = new Person("An", 25);
person2.greet(); // Xin chào, tôi là An
Ưu điểm của class:
-
Cú pháp trực quan, dễ đọc.
-
Dễ dàng mở rộng với tính kế thừa.
-
Tránh thao tác trực tiếp với prototype, giúp code gọn gàng hơn.
Cách khai báo một class trong JavaScript
Trong JavaScript, có thể khai báo một class bằng từ khóa class, sau đó định nghĩa constructor và các phương thức bên trong.
Cấu trúc cơ bản của một class
class ClassName {
constructor(parameters) {
// Khởi tạo thuộc tính
}
methodName() {
// Định nghĩa phương thức
}
}
Ví dụ minh họa về cách khai báo class
Dưới đây là một ví dụ về class Car có thuộc tính brand và speed, cùng với phương thức để tăng tốc:
class Car {
constructor(brand, speed) {
this.brand = brand;
this.speed = speed;
}
accelerate(amount) {
this.speed += amount;
console.log(`${this.brand} tăng tốc lên ${this.speed} km/h`);
}
}
const car1 = new Car("Toyota", 80);
car1.accelerate(20); // Toyota tăng tốc lên 100 km/h
Điểm cần lưu ý:
-
Constructor được gọi khi tạo một đối tượng mới từ class.
-
this dùng để tham chiếu đến đối tượng hiện tại.
-
Không cần sử dụng
functionkhi định nghĩa phương thức trong class.
Constructor trong class trong JavaScript
Phương thức constructor() là một phương thức đặc biệt trong class, được tự động gọi khi một đối tượng mới được tạo. Nó được sử dụng để khởi tạo các thuộc tính của đối tượng.
Vai trò của constructor() trong việc khởi tạo đối tượng
-
Gán giá trị ban đầu cho các thuộc tính của đối tượng.
-
Giúp tự động thiết lập trạng thái của đối tượng khi nó được tạo ra.
-
Có thể nhận tham số để khởi tạo đối tượng với dữ liệu cụ thể.
Ví dụ minh họa về constructor()
class Animal {
constructor(name, sound) {
this.name = name;
this.sound = sound;
}
makeSound() {
console.log(`${this.name} kêu: ${this.sound}`);
}
}
const cat = new Animal("Mèo", "Meo Meo");
cat.makeSound(); // Mèo kêu: Meo Meo
