Thứ Tư, 1 tháng 11, 2023

React ES6 Classes

Class

ES6 đã giới thiệu khái niệm class.

Một class là một loại function, nhưng thay vì sử dụng từ khóa function để bắt đầu, thì chúng ta sử dụng từ khóa class, và các thuộc tính được gán ở bên trong một phương thức có tên là constructor().

Ví dụ: Một class đơn giản có constructor:



Chú ý đến tên của class. Chúng ta đã đặt tên là "Car", với một ký tự viết hoa. Đây là một quy ước đặt tên chuẩn cho các class.

Bây giờ thì bạn có thể tạo ra các object bằng cách sử dụng class có tên là Car :

Ví dụ: Tạo ra một object có tên là "mycar" dựa trên class có tên là Car :



Lưu ý: constructor function sẽ được gọi tự động khi object được khởi tạo.

Phương thức trong các Class

Bạn có thể thêm các phương thức của riêng mình vào một class:

Ví dụ: Tạo ra một phương thức có tên là "present":


Như bạn có thể thấy trong ví dụ bên trên, bạn đã gọi phương thức bằng cách tham chiếu đến tên phương thức của đối tượng, theo sau là dấu ngoặc tròn (các tham số sẽ nằm trong dấu ngoặc tròn).

Sự thừa kế Class

Để tạo ra một sự thừa kế, chúng ta sử dụng từ khóa extends.

Một class được tạo ra với một sự thừa kế sẽ kế thừa tất cả các phương thức từ một class khác:

Ví dụ: Tạo ra một class được đặt tên là "Model", class này sẽ kế thừa các phương thức từ class có tên là "Car":



Phương thức super() sẽ tham chiếu đến class cha.

Bằng cách gọi phương thức super() trong phương thức constructor, chúng ta đã gọi phương thức constructor của class cha và có được quyền truy cập vào các thuộc tính và phương thức của class cha.

Để tìm hiểu thêm về class, hãy xem phần JavaScript Classes của chúng tôi.

Không có nhận xét nào:

Đăng nhận xét

Styling React Using Sass

Sass là cái gì? Sass là một tiền xử lý của CSS. Các tập tin Sass được thực thi trên server và gửi CSS đến trình duyệt. Bạn có thể tìm hiểu t...