Kế thừa lớp trong JavaScript

Kế thừa lớp

Để tạo lớp kế thừa, hãy sử dụng extends Chìa khóa.

Lớp được tạo bằng cách kế thừa sẽ kế thừa tất cả các phương thức của lớp khác:

Mẫu

Tạo một lớp tên là "Model" sẽ kế thừa phương thức của lớp "Car":

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present() {
    return 'Tôi có một ' + this.carname;
  }
}
class Model extends Car {}}}
  constructor(brand, mod) {
    super(brand);
    this.model = mod;
  }
  show() {
    return this.present() + ', nó là một ' + this.model;
  }
}
let myCar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML = myCar.show();

Thử làm ngay

super() phương thức trong phương thức constructor.

Bằng cách gọi super() Phương thức, chúng ta đã gọi phương thức constructor của lớp cha, để có quyền truy cập vào thuộc tính và phương thức của lớp cha.

Kế thừa rất hữu ích cho khả năng tái sử dụng mã: tái sử dụng thuộc tính và phương thức của lớp hiện có khi tạo lớp mới.

Getter và Setter

Lớp cũng cho phép bạn sử dụng getter và setter.

Sử dụng getter và setter cho thuộc tính của bạn rất thông minh, đặc biệt nếu bạn muốn làm một số điều đặc biệt trước khi trả về hoặc thiết lập chúng.

Nếu muốn thêm getter và setter trong lớp, hãy sử dụng get và set Chìa khóa.

Mẫu

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;

Thử làm ngay

Ghi chú:Dù getter là một phương thức, khi bạn muốn lấy giá trị thuộc tính, đừng sử dụng dấu ngoặc round:

Tên phương thức getter/setter không thể trùng với tên thuộc tính, trong ví dụ này là carname。

Nhiều nhà phát triển sử dụng ký tự dấu gạch dưới _ trước tên thuộc tính để tách getter/setter với thuộc tính thực tế:

Mẫu

Bạn có thể sử dụng ký tự dấu gạch dưới để tách getter/setter vớ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;

Thử làm ngay

Nếu cần sử dụng setter, hãy sử dụng ngữ pháp giống như giá trị thuộc tính được thiết lập, không có dấu ngoặc round:

Mẫu

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;
  }
}
let myCar = new Car("Ford");
myCar.carname = "Volvo";
document.getElementById("demo").innerHTML = myCar.carname;

Thử làm ngay

Nâng lên

Khác với các khai báo hàm và các khai báo JavaScript khác, khai báo lớp không bị nâng lên.

Điều này có nghĩa là bạn phải khai báo lớp trước khi sử dụng nó:

Mẫu

//Bạn vẫn chưa thể sử dụng lớp này.
//myCar = new Car("Ford")
//Đây sẽ gây ra lỗi.
class Car {
  constructor(brand) {
    this.carname = brand;
  }
}
//Bây giờ bạn có thể sử dụng lớp này:
let myCar = new Car("Ford")

Thử làm ngay

Ghi chú:Đối với các tuyên bố khác, như hàm, bạn sẽ không gặp lỗi khi thử sử dụng nó trước khi khai báo vì hành vi mặc định của khai báo JavaScript là nâng lên (di chuyển khai báo lên trên).