Lớp React ES6

Các lớp học

ES6 đã giới thiệu các lớp học.

Một lớp là một loại hàm, nhưng thay vì sử dụng từ khóa functionđể khởi tạo nó, chúng ta sử dụng từ khóa classvà các thuộc tính được gán bên trong một constructor()phương thức.

class Car {
  constructor(name) {
    this.brand = name;
  }
}

Bây giờ bạn có thể tạo các đối tượng bằng cách sử dụng lớp Xe:

class Car {
  constructor(name) {
    this.brand = name;
  }
}

const mycar = new Car("Ford");

Phương pháp trong lớp

Bạn có thể thêm các phương thức của riêng mình trong một lớp:

class Car {
  constructor(name) {
    this.brand = name;
  }
  
  present() {
    return 'I have a ' + this.brand;
  }
}

const mycar = new Car("Ford");
mycar.present();

Như bạn có thể thấy trong ví dụ trên, bạn gọi phương thức bằng cách tham chiếu đến tên phương thức của đối tượng theo sau là dấu ngoặc đơn (các tham số sẽ nằm bên trong dấu ngoặc đơn).

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:

class Car {
  constructor(name) {
    this.brand = name;
  }

  present() {
    return 'I have a ' + this.brand;
  }
}

class Model extends Car {
  constructor(name, mod) {
    super(name);
    this.model = mod;
  }  
  show() {
      return this.present() + ', it is a ' + this.model
  }
}
const mycar = new Model("Ford", "Mustang");
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.

Để tìm hiểu thêm về các lớp học, hãy xem phần Lớp học JavaScript của chúng tôi .