Kế thừa lớp JavaScript
Kế thừa giai cấp
Để tạo kế thừa lớp, hãy sử dụng extends
từ khóa.
Một lớp được tạo với kế thừa lớp sẽ kế thừa tất cả các phương thức từ một lớp khác:
Thí dụ
Tạo một lớp có tên "Model" sẽ kế thừa các phương thức từ lớp "Car":
class Car {
constructor(brand) {
this.carname =
brand;
}
present() {
return 'I have a ' + this.carname;
}
}
class Model extends Car {
constructor(brand, mod) {
super(brand);
this.model = mod;
}
show() {
return this.present() + ', it is a ' + this.model;
}
}
let myCar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML
= myCar.show();
Phương super()
thức tham chiếu đến lớp cha.
Bằng cách gọi super()
phương thức trong phương thức khởi tạo, chúng ta gọi phương thức khởi tạo của cha và có quyền truy cập vào các thuộc tính và phương thức của cha.
Kế thừa hữu ích cho khả năng tái sử dụng mã: sử dụng lại các thuộc tính và phương thức của một lớp hiện có khi bạn tạo một lớp mới.
Người nhận và người định cư
Các lớp học cũng cho phép bạn sử dụng getters và setters.
Có thể là thông minh khi sử dụng getters và setters cho các thuộc tính của bạn, đặc biệt nếu bạn muốn làm điều gì đó đặc biệt với giá trị trước khi trả lại chúng hoặc trước khi bạn đặt chúng.
Để thêm getters và setters trong lớp, hãy sử dụng
get
và set
từ khóa.
Thí dụ
Tạo getter và setter cho thuộc tính "carname":
class Car {
constructor(brand) {
this.carname
= brand;
}
get cnam() {
return this.carname;
}
set cnam(x) {
this.carname = x;
}
}
let myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.cnam;
Lưu ý: ngay cả khi getter là một phương thức, bạn không sử dụng dấu ngoặc đơn khi bạn muốn nhận giá trị thuộc tính.
Trong trường hợp này, tên của phương thức getter / setter không được giống với tên của thuộc tính carname
.
Nhiều lập trình viên sử dụng một ký tự gạch dưới _
trước tên thuộc tính để tách getter / setter khỏi thuộc tính thực tế:
Thí dụ
Bạn có thể sử dụng ký tự gạch dưới để tách getter / setter khỏi thuộc tính thực tế:
class Car {
constructor(brand) {
this._carname
= brand;
}
get carname() {
return this._carname;
}
set carname(x) {
this._carname = x;
}
}
let myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.carname;
Để sử dụng bộ định mức , hãy sử dụng cú pháp giống như khi bạn đặt giá trị thuộc tính, không có dấu ngoặc đơn:
Thí dụ
Sử dụng bộ định vị để thay đổi tên xe thành "Volvo":
class Car {
constructor(brand) {
this._carname
= brand;
}
get carname() {
return this._carname;
}
set carname(x) {
this._carname = x;
}
}
let myCar = new Car("Ford");
myCar.carname = "Volvo";
document.getElementById("demo").innerHTML = myCar.carname;
Cẩu
Không giống như các hàm và các khai báo JavaScript khác, khai báo lớp không được đưa vào.
Điều đó có nghĩa là bạn phải khai báo một lớp trước khi bạn có thể sử dụng nó:
Thí dụ
//You cannot use the class yet.
//myCar = new Car("Ford")
//This would
raise an error.
class Car {
constructor(brand) {
this.carname = brand;
}
}
//Now you can use the class:
let myCar = new Car("Ford")
Lưu ý: Đối với các khai báo khác, chẳng hạn như các hàm, bạn sẽ KHÔNG gặp lỗi khi cố gắng sử dụng nó trước khi nó được khai báo, vì hành vi mặc định của các khai báo JavaScript là lưu trữ (di chuyển khai báo lên trên cùng).