5.1 Khai báo lớp
Với sự ra đời của ECMAScript 6 (ES6) trong JavaScript, có một cấu trúc mới để tạo đối tượng và quản lý kế thừa -
từ khóa class. Classes cung cấp cú pháp dễ dàng và rõ ràng hơn để tạo
đối tượng và làm việc với prototypes.
Classes trong JavaScript — là cú pháp ngọt ngào dựa trên hệ thống kế thừa prototype hiện có. Chúng làm cho việc tạo và quản lý đối tượng trở nên dễ hiểu và có cấu trúc hơn.
Khai báo lớp
Lớp trong JavaScript được khai báo bằng cách sử dụng từ khóa class, theo sau đó là tên lớp.
Nội dung lớp được đặt trong dấu ngoặc nhọn {}.
Ví dụ:
class Person {
// Phương thức lớp
greet() {
console.log('Hello!');
}
}
// Tạo một instance của lớp
const person = new Person();
person.greet(); // Xuất ra: Hello!
Biểu thức lớp
Các lớp có thể được khai báo thông qua khai báo hoặc thông qua biểu thức. Biểu thức lớp có thể có tên hoặc không tên.
Ví dụ về lớp có tên:
const Person = class PersonClass {
greet() {
console.log('Hello!');
}
};
const person = new Person();
person.greet(); // Xuất ra: Hello!
Ví dụ về lớp không tên:
const Person = class {
greet() {
console.log('Hello!');
}
};
const person = new Person();
person.greet(); // Xuất ra: Hello!
5.2 Các trường và phương thức của lớp
Thuộc tính lớp
Thuộc tính lớp trong ES6 có thể được khai báo chỉ trong constructor. Tuy nhiên, trong các phiên bản mới hơn của JavaScript (ES2022) đã giới thiệu các trường lớp, cho phép khai báo thuộc tính ngoài constructor.
Ví dụ về sử dụng thuộc tính trong constructor:
class User {
constructor(username, email) {
this.username = username;
this.email = email;
}
}
const user = new User('john_doe', 'john@example.com');
console.log(user.username); // "john_doe"
console.log(user.email); // "john@example.com"
Ví dụ về sử dụng trường lớp (ES2022):
class User {
username = 'default_username';
email = 'default@example.com';
constructor(username, email) {
this.username = username;
this.email = email;
}
}
const user = new User('john_doe', 'john@example.com');
console.log(user.username); // "john_doe"
console.log(user.email); // "john@example.com"
Giải thích:
- Trong ví dụ đầu tiên, thuộc tính
usernamevàemailđược khai báo và khởi tạo trong constructor - Trong ví dụ thứ hai, thuộc tính
usernamevàemailđược khai báo ngoài constructor như là trường lớp
Phương thức lớp
Lớp có thể chứa các phương thức được định nghĩa trong nội dung của lớp. Những phương thức này tự động được thêm vào prototype của các đối tượng đã tạo ra.
Ví dụ về phương thức lớp:
class Animal {
speak() {
console.log('Animal speaks');
}
eat() {
console.log('Animal eats');
}
}
const animal = new Animal();
animal.speak(); // Xuất ra: Animal speaks
animal.eat(); // Xuất ra: Animal eats
3.3 Ví dụ về sử dụng lớp
Tạo đối tượng phức tạp
Classes cho phép tạo ra các đối tượng phức tạp với nhiều phương thức và thuộc tính khác nhau.
Ví dụ:
class Car {
constructor(brand, model) {
this.brand = brand;
this.model = model;
}
startEngine() {
console.log(`${this.brand} ${this.model} engine started.`);
}
stopEngine() {
console.log(`${this.brand} ${this.model} engine stopped.`);
}
}
const myCar = new Car('Toyota', 'Camry');
myCar.startEngine(); // Xuất ra: Toyota Camry engine started.
myCar.stopEngine(); // Xuất ra: Toyota Camry engine stopped.
GO TO FULL VERSION