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 |
Bạn sẽ tìm hiểu thêm nhiều điều về Lớp JavaScript sau trong hướng dẫn này.
