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 |
Bạn sẽ tìm hiểu thêm về các Lớp JavaScript ở phần sau của hướng dẫn này.