Kelas React ES6

Kelas

ES6 memperkenalkan kelas.

Kelas adalah jenis fungsi, tetapi alih-alih menggunakan kata kunci functionuntuk memulainya, kami menggunakan kata kunci class, dan properti ditugaskan di dalam constructor()metode.

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

Sekarang Anda dapat membuat objek menggunakan kelas Mobil:

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

const mycar = new Car("Ford");

Metode di Kelas

Anda dapat menambahkan metode Anda sendiri di kelas:

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

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

Seperti yang Anda lihat pada contoh di atas, Anda memanggil metode dengan mengacu pada nama metode objek diikuti dengan tanda kurung (parameter akan dimasukkan ke dalam tanda kurung).

Warisan Kelas

Untuk membuat pewarisan kelas, gunakan extends kata kunci.

Kelas yang dibuat dengan pewarisan kelas mewarisi semua metode dari kelas lain:

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();

Metode super()mengacu pada kelas induk.

Dengan memanggil super()metode dalam metode konstruktor, kita memanggil metode konstruktor induk dan mendapatkan akses ke properti dan metode induk.

Untuk mempelajari lebih lanjut tentang kelas, lihat bagian Kelas JavaScript kami .