Kế thừa lớp JavaScript
Kế thừa lớp
Để tạo sự kế thừa lớp, hãy sử dụng từ khóa extends
.
Một lớp được tạo bằng tính kế thừa của lớp sẽ kế thừa tất cả các phương thức từ một lớp khác:
Ví dụ
Tạo một lớp có tên "Model" sẽ kế thừa các phương thức từ lớp "Ô tô":
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 thức super()
đề cập đến lớp cha.
Bằng cách gọi phương thức super()
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.
Tính kế thừa rất hữu ích cho khả năng sử dụng lại 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.
Getters và Setters
Các lớp cũng cho phép bạn sử dụng getters và setters.
Sẽ là thông minh nếu sử dụng getters và setters cho 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ả về 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 từ khóa get
và set
.
Ví dụ
Tạo một 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;
}
}
const 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 muốn lấy giá trị thuộc tính.
Tên của phương thức getter/setter không thể giống với tên của thuộc tính, trong trường hợp này carname
.
Nhiều lập trình viên sử dụng 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ế:
Ví 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;
}
}
const myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.carname;
Để sử dụng setter , hãy sử dụng cú pháp tương tự như khi bạn đặt giá trị thuộc tính mà không có dấu ngoặc đơn:
Ví dụ
Sử dụng setter để 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;
}
}
const 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, các khai báo lớp không được nâng lên.
Điều đó có nghĩa là bạn phải khai báo một lớp trước khi có thể sử dụng nó:
Ví dụ
//You cannot use the class yet.
//myCar = new Car("Ford") will raise an error.
class Car {
constructor(brand) {
this.carname = brand;
}
}
//Now you can use the class:
const myCar = new Car("Ford")
Hãy tự mình thử »Lưu ý: Đối với các khai báo khác, như 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à nâng lên (di chuyển khai báo lên trên cùng).