1. Class Inheritance trong JavaScript là gì?

Class Inheritance trong Js chính là tính kế thừa của lớp trong Js.Nó cho phép một lớp có thể thừa kế tất cả các hàm từ một lớp cha và cho phép định nghĩa thêm các hàm khác.

Bằng cách tận dụng tính kế thừa lớp trong Js, một lớp có thể kế thừa tất cả các phương thức và thuộc tính của lớp khác. Kế thừa là một tính năng hữu ích cho phép khả năng tái sử dụng các đoạn 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.

Để thực hiện việc kế thừa từ một lớp khác, ta sẽ sử dụng từ khóa extends .

Ví dụ:

<script>
class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present() {
    return 'Tôi có một chiếc xe hãng ' + this.carname;
  }
}

class Model extends Car {
  constructor(brand, mod) {
    super(brand);
    this.model = mod;
  }
  show() {
    return this.present() + ', Nó là một chiết ' + this.model;
  }
}

let myCar = new Model("Ford", "Mustang");
document.write(myCar.show());
</script>

2. Phương thức Super trong JavaScript

Phương thức super() tham chiếu đến lớp cha. Tức là nó được sử dụng bên trong lớp con để biểu thị lớp cha của nó (Lớp mà nó kế thừa).

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à nhận được quyền truy cập vào các thuộc tính và phương thức của cha.

Ví dụ:

<script>
class sinh_vien {
  constructor(a) {
    this.ten = a;
  }
  in_thong_tin = function () {
        console.log(this.ten);
  }
}
class sv_Luat extends sinh_vien {
    constructor(b) {
        document.write("Gọi hàm cha");
        super(b);
    }
}
let sv = new sv_Luat('Nam');
sv.in_thong_tin();
</script>

3. Ghi đè phương thức hoặc thuộc tính

Nếu một lớp con có cùng tên của phương thức hoặc thuộc tính với tên của phương thức hoặc thuộc tính trong lớp cha, nó sẽ sử dụng phương thức và thuộc tính của lớp con. Ta gọi nó là ghi đè phương thức hoặc thuộc tính.

<script>
class sinh_vien {
  constructor(a) {
    this.ten = a;
    this.ID = 100;
  }
  in_thong_tin = function () {
        document.write(this.ten);
  }
}
class sv_Luat extends sinh_vien {
    constructor(b) {
        document.write("Gọi hàm cha");
        super(b);
        this.ID = 230;
    }
    in_thong_tin = function () {
        document.write(this.ten);
        document.write(this.ID);
        document.write("Ghi đè hàm.");
    }
}
let sv = new sv_Luat('Thành');
sv.in_thong_tin();
</script>

Ở đây, thuộc tính ID và phương thức in_thong_tin() có tồn tại trong lớp cha sinh_vien và lớp con sv_Luat . Như vậy, lớp sv_Luat sẽ ghi đè thuộc tính ID và phương thức in_thong_tin() trong lớp cha.

4. Getters and Setters trong Class

Class cho phép ta sử dụng getters và setters . Ta có thể thông minh trong việc sử dụng getters và setters cho thuộc tính. Đặc biệt nếu ta muốn làm điều gì đó đặc biệt với giá trị trước khi trả lại hoặc trước khi đặt nó.

Để thêm getters và setters trong class ,ta sử dụng từ khóa get và set .

Ví dụ: Tạo getter và setter cho thuộc tính “carname”:

<script>
class Car {
  constructor(brand) {
    this.carname = brand;
  }
  get cnam() {
    return this.carname;
  }
  set cnam(x) {
    this.carname = x;
  }
}

let myCar = new Car("Ford");

document.write(myCar.cnam);
</script>

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 . Ta có thể 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ế:

<script>
class Car {
  constructor(brand) {
    this._carname = brand;
  }
  get carname() {
    return this._carname;
  }
  set carname(x) {
    this._carname = x;
  }
}

let myCar = new Car("Ford");

document.write(myCar.carname);
</script>

Để sử dụng setter ta có thể dùng cú pháp giống như khi đặt giá trị của thuộc tính, sẽ không có dấu ngoặc đơn

Ví dụ: Sử dụng setter để thay đổi tên xe thành “Volvo”:

<script>
class Car {
  constructor(brand) {
    this._carname = brand;
  }
  set carname(x) {
    this._carname = x;
  }
  get carname() {
    return this._carname;
  }
}

let myCar = new Car("Ford");
myCar.carname = "Volvo";
document.write(myCar.carname);
</script>