Các lớp JavaScript
ECMAScript 2015, còn được gọi là ES6, đã giới thiệu các Lớp JavaScript.
Các lớp JavaScript là các mẫu cho các Đối tượng JavaScript.
Cú pháp lớp JavaScript
Sử dụng từ khóa classđể tạo một lớp học.
Luôn thêm một phương thức có tên constructor():
Cú pháp
class ClassName {
constructor() { ... }
}
Thí dụ
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
Ví dụ trên tạo một lớp có tên là "Xe".
Lớp có hai thuộc tính ban đầu: "name" và "year".
Một lớp JavaScript không phải là một đối tượng.
Nó là một mẫu cho các đối tượng JavaScript.
Sử dụng một lớp học
Khi bạn có một lớp, bạn có thể sử dụng lớp đó để tạo các đối tượng:
Thí dụ
let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);
Ví dụ trên sử dụng lớp Xe để tạo hai đối tượng Xe .
Phương thức khởi tạo được gọi tự động khi một đối tượng mới được tạo.
Phương pháp xây dựng
Phương thức hàm tạo là một phương thức đặc biệt:
- Nó phải có tên chính xác là "constructor"
- Nó được thực thi tự động 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
Nếu bạn không xác định một phương thức khởi tạo, JavaScript sẽ thêm một phương thức khởi tạo trống.
Phương pháp lớp học
Các phương thức lớp được tạo ra với cùng một cú pháp như các phương thức đối tượng.
Sử dụng từ khóa classđể tạo một lớp học.
Luôn thêm một constructor()phương thức.
Sau đó, thêm bất kỳ số lượng phương thức nào.
Cú pháp
class ClassName {
constructor() { ... }
method_1() { ... }
method_2() { ... }
method_3() { ... }
}
Tạo một phương thức Class có tên "age", phương thức này trả về tuổi Xe:
Thí dụ
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age() {
let date = new Date();
return date.getFullYear() - this.year;
}
}
let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
"My car is " + myCar.age() + " years old.";
Bạn có thể gửi các tham số đến các phương thức Class:
Thí dụ
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age(x) {
return x - this.year;
}
}
let date = new Date();
let year = date.getFullYear();
let myCar = new
Car("Ford", 2014);
document.getElementById("demo").innerHTML=
"My car is
" + myCar.age(year) + " years old.";
Hỗ trợ trình duyệt
Bảng sau xác định phiên bản trình duyệt đầu tiên có hỗ trợ đầy đủ cho Lớp trong JavaScript:
| Chrome 49 | Edge 12 | Firefox 45 | Safari 9 | Opera 36 |
| Mar, 2016 | Jul, 2015 | Mar, 2016 | Oct, 2015 | Mar, 2016 |
"Sử dụng nghiêm ngặt"
Cú pháp trong các lớp phải được viết ở "chế độ nghiêm ngặt".
Bạn sẽ gặp lỗi nếu bạn không tuân theo các quy tắc "chế độ nghiêm ngặt".
Thí dụ
Trong "chế độ nghiêm ngặt", bạn sẽ gặp lỗi nếu bạn sử dụng một biến mà không khai báo nó:
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age() {
// date = new Date(); // This will not work
let date = new Date(); // This will work
return date.getFullYear() - this.year;
}
}
Tìm hiểu thêm về "chế độ nghiêm ngặt" trong: Chế độ nghiêm ngặt JS .