Pener cucian Kelas JavaScript

Pengecekan kelas

Untuk membuat pengecekan kelas, gunakan extends Kata kunci.

Kelas yang dibuat dengan pengecekan kelas menurunkan semua metode kelas lain:

Instance

Buat kelas bernama "Model" yang akan menurunkan metode kelas "Car":

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present() {
    kembalikan 'Saya memiliki sepeda ' + this.carname;
  }
}
class Model extends Car {}}
  constructor(merk, mod) {
    super(merk);
    this.model = mod;
  }
  show() {
    return this.present() + ', it is a ' + this.model;
  }
}
let myCar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML = myCar.show();

Coba Sendiri

super() metode menunjuk kelas induk.

Dengan memanggil super() Metode, kami panggil metode constructor induk, mendapatkan akses ke atribut dan metode induk.

Pemiliknaskah untuk kegunaan kembali kode sangat berharga: penggunaan atribut dan metode kelas yang sudah ada saat membuat kelas baru.

Getter dan Setter

Kelas juga memungkinkan Anda menggunakan getter dan setter.

Memakai getter dan setter untuk atribut Anda sangat cerdas, khususnya jika Anda ingin melakukan sesuatu khusus sebelum atau setelah mengembalikan atau mengatur nilai mereka.

Untuk menambahkan getter dan setter dalam kelas, gunakan get dan set Kata kunci.

Instance

Buat getter dan setter untuk atribut "carname":

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  get cnam() {
    return this.namakendaraan;
  }
  set cnam(x) {
    this.namakendaraan = x;
  }
}
let myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.cnam;

Coba Sendiri

Keterangan:Meskipun getter adalah metode, jangan gunakan tanda kurung saat Anda ingin mendapatkan nilai atribut.

Nama metode getter/setter tidak boleh sama dengan nama atribut, dalam kasus ini adalah namakendaraan.

Banyak pendeta program menggunakan karakter garis bawah _ untuk memisahkan getter/setter dengan atribut yang sebenarnya:

Instance

Anda dapat menggunakan karakter garis bawah untuk memisahkan getter/setter dengan atribut yang sebenarnya:

class Car {
  constructor(brand) {
    this._namakendaraan = merk;
  }
  get namakendaraan() {
    return this._namakendaraan;
  }
  set carname(x) {
    this._carname = x;
  }
}
let myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.carname;

Coba Sendiri

Untuk menggunakan setter, gunakan sintaks yang sama seperti mengatur nilai atribut, tanpa tanda kurung:

Instance

Gunakan setter untuk mengubah nama kendaraan menjadi "Volvo":

class Car {
  constructor(brand) {
    this._namakendaraan = merk;
  }
  get namakendaraan() {
    return this._namakendaraan;
  }
  set carname(x) {
    this._carname = x;
  }
}
let myCar = new Car("Ford");
myCar.carname = "Volvo";
document.getElementById("demo").innerHTML = myCar.carname;

Coba Sendiri

Hoisting

Beberapa pernyataan seperti fungsi dan pernyataan JavaScript lainnya, pernyataan kelas tidak akan dihoisting.

Artinya Anda harus menyatakan kelas terlebih dahulu sebelum dapat menggunakannya:

Instance

//Anda belum dapat menggunakan kelas ini.
//myCar = new Car("Ford")
//Ini akan memunculkan kesalahan.
class Car {
  constructor(brand) {
    this.carname = brand;
  }
}
//Sekarang Anda dapat menggunakan kelas ini:
let myCar = new Car("Ford")

Coba Sendiri

Keterangan:Untuk pernyataan lainnya, seperti fungsi, tidak ada kesalahan saat mencoba menggunakan itu sebelum pernyataan, karena perilaku bawaan pernyataan JavaScript adalah hoisting (memindahkan pernyataan ke atas).