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.
Luôn thêm một phương thức có tên constructor()
:
Cú pháp
class ClassName {
constructor() { ... }
}
Ví dụ
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
Ví dụ trên tạo ra một lớp có tên là "Ô tô".
Lớp này có hai thuộc tính ban đầu: "tên" và "năm".
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
Khi bạn có một lớp, bạn có thể sử dụng lớp đó để tạo các đối tượng:
Ví dụ trên sử dụng lớp Car để tạo hai đối tượng Car .
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 khởi 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 đối tượng
Nếu bạn không xác định 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 thức lớp
Các phương thức lớp được tạo với cú pháp giống như các phương thức đối tượng.
Sử dụng từ khóa class
để tạo một lớp.
Luôn thêm phương thức constructor()
.
Sau đó thêm bất kỳ số lượng phương pháp.
Cú pháp
class ClassName {
constructor() { ... }
method_1() { ... }
method_2() { ... }
method_3() { ... }
}
Tạo một phương thức Lớp có tên là "age", trả về Tuổi xe:
Ví dụ
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age() {
const date = new Date();
return date.getFullYear() - this.year;
}
}
const myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
"My car is " + myCar.age() + " years old.";
Bạn có thể gửi tham số tới các phương thức Lớp:
Ví dụ
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age(x) {
return x - this.year;
}
}
const date = new Date();
let year = date.getFullYear();
const 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 đây xác định phiên bản trình duyệt đầu tiên có hỗ trợ đầy đủ cho các 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 không tuân theo các quy tắc "chế độ nghiêm ngặt".
Ví dụ
Trong "chế độ nghiêm ngặt", bạn sẽ gặp lỗi nếu 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
const date = new Date(); // This will work
return date.getFullYear() - this.year;
}
}
Hãy tự mình thử »Tìm hiểu thêm về "chế độ nghiêm ngặt" trong: Chế độ nghiêm ngặt JS .