Hướng dẫn入门 JavaScript Classes

Xin chào các nhà pháp sư JavaScript tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của các lớp JavaScript. Đừng lo lắng nếu bạn chưa bao giờ viết một dòng mã trước đây - tôi sẽ là người hướng dẫn thân thiện của bạn, và chúng ta sẽ cùng nhau từng bước. Cuối cùng của bài hướng dẫn này, bạn sẽ có thể tạo ra các lớp của riêng mình như một chuyên gia!

JavaScript Classes là gì?

Hãy tưởng tượng bạn đang xây dựng một vườn thú ảo. Bạn không muốn mô tả từng con vật một cách riêng lẻ, phải không? Đó là khi các lớp trở nên hữu ích. Một lớp giống như một bản vẽ cho việc tạo ra các đối tượng. Nó xác định các thuộc tính và hành vi mà tất cả các đối tượng của loại đó nên có.

Hãy bắt đầu với một ví dụ đơn giản:

class Animal {
constructor(name, species) {
this.name = name;
this.species = species;
}

makeSound() {
console.log("Con vật phát ra một âm thanh");
}
}

Trong ví dụ này, Animal là lớp của chúng ta. Nó giống như nói, "Mỗi con vật trong vườn thú của chúng ta sẽ có một tên, một loài và khả năng phát ra âm thanh."

Định nghĩa các lớp JavaScript

Để định nghĩa một lớp trong JavaScript, chúng ta sử dụng từ khóa class tiếp theo là tên của lớp. Tên lớp thường bắt đầu với một chữ cái viết hoa - điều này không bắt buộc, nhưng là một quy ước phổ biến giúp phân biệt các lớp với các loại mã khác.

Phương thức constructor()

Phương thức constructor() là một phương thức đặc biệt để tạo và khởi tạo các đối tượng được tạo ra từ một lớp. Nó được gọi tự động khi chúng ta tạo một đối tượng mới từ lớp này.

class Book {
constructor(title, author, year) {
this.title = title;
this.author = author;
this.year = year;
}
}

Ở đây, title, author, và year là các thuộc tính mà mỗi đối tượng Book sẽ có. Từ khóa this tham chiếu đến đối tượng đang được tạo.

Tạo các đối tượng JavaScript

Bây giờ chúng ta đã có lớp của mình, hãy tạo một số đối tượng!

let myBook = new Book("Great Gatsby", "F. Scott Fitzgerald", 1925);
console.log(myBook.title); // Xuất: Great Gatsby

Từ khóa new được sử dụng để tạo một thực thể mới của lớp Book. Nó giống như nói, "Hey JavaScript, hãy tạo cho tôi một cuốn sách mới sử dụng bản vẽ này của lớp Book!"

Phương thức của các lớp JavaScript

Phương thức là các hàm thuộc về một lớp. Chúng xác định các hành vi mà các đối tượng của lớp có thể thực hiện.

class Dog {
constructor(name) {
this.name = name;
}

bark() {
console.log(`${this.name} nói: Woof woof!`);
}

fetch(item) {
console.log(`${this.name} mang về ${item}`);
}
}

let myDog = new Dog("Buddy");
myDog.bark(); // Xuất: Buddy nói: Woof woof!
myDog.fetch("ball"); // Xuất: Buddy mang về ball

Trong ví dụ này, bark() và fetch() là các phương thức của lớp Dog. Mỗi đối tượng Dog chúng ta tạo ra sẽ có những khả năng này.

Các loại lớp JavaScript

JavaScript hỗ trợ hai loại lớp chính:

1. Khai báo: Đây là điều chúng ta đã sử dụng cho đến nay.

   class Rectangle {
   // thân lớp
   }

2. Biểu thức: Các lớp cũng có thể được định nghĩa trong biểu thức.

   let Rectangle = class {
   // thân lớp
   };

Cả hai đều đạt được kết quả alike, nhưng khai báo lớp thường phổ biến hơn và dễ đọc hơn.

Lifting của các lớp JavaScript

Khác với khai báo hàm, khai báo lớp không được nâng cấp. Điều này có nghĩa là bạn không thể sử dụng một lớp trước khi nó được định nghĩa trong mã của bạn.

// Điều này sẽ gây ra lỗi
let p = new Rectangle(); // Lỗi tham chiếu

class Rectangle {}

Luôn định nghĩa các lớp trước khi bạn sử dụng chúng!

Chế độ nghiêm ngặt với các lớp

Đây là một sự thật thú vị: thân của một lớp luôn được thực thi trong chế độ nghiêm ngặt. Điều này có nghĩa là nó giống như có một giáo viên nghiêm ngặt không để bạn lười biếng trong mã. Ví dụ:

class StrictClass {
method() {
undeclaredVariable = 5; // Điều này sẽ gây ra lỗi
}
}

Trong chế độ nghiêm ngặt, bạn phải khai báo các biến trước khi sử dụng chúng. Điều này giúp bắt các lỗi lập trình phổ biến và giữ cho mã của bạn sạch sẽ!

Bảng các phương thức lớp

Dưới đây là bảng các phương thức liên quan đến lớp phổ biến:

Phương thức	Mô tả
constructor()	Khởi tạo một thực thể mới của lớp
static	Định nghĩa một phương thức tĩnh cho lớp
extends	Tạo một lớp con của một lớp khác
super	Gọi constructor của lớp cha
get	Định nghĩa một phương thức getter
set	Định nghĩa một phương thức setter

Kết luận

Chúc mừng! Bạn đã chính thức bước vào thế giới của các lớp JavaScript. Nhớ rằng, như việc học bất kỳ kỹ năng mới nào, việc thực hành sẽ làm cho bạn trở nên hoàn hảo. Hãy thử tạo ra các lớp của riêng bạn - có thể là một lớp Car với các phương thức như startEngine() và drive(), hoặc một lớp Superhero với phương thức useSpecialPower().

Các lớp là một công cụ mạnh mẽ trong JavaScript, cho phép bạn tạo ra mã có tổ chức và có thể tái sử dụng. Chúng giống như những mảnh Legos - đơn giản khi riêng lẻ, nhưng có thể xây dựng nên những điều kỳ diệu khi kết hợp lại.

Tiếp tục mã hóa, tiếp tục học hỏi, và trước khi bạn biết, bạn sẽ dễ dàng xây dựng các ứng dụng phức tạp. Chúc may mắn, các nhà phát triển tương lai!

Credits: Image by storyset