Kelas JavaScript

ECMAScript 2015, disebut juga ES6, memperkenalkan kelas JavaScript.

Kelas JavaScript adalah templat objek JavaScript.

Kelas JavaScript

Sintaks

Gunakan kata kunci class Buat kelas.

Selalu tambahkan dengan nama constructor() dengan metode:

Sintaks

class ClassName {
  constructor() { ... }
}

instansi

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

Contoh di atas membuat kelas bernama "Car".

Kelas ini memiliki dua properti awal: "name" dan "year".

Kelas JavaScriptBukanObjek.

Ini hanya objek JavaScript.Templat.

Penggunaan kelas

Jika Anda memiliki kelas, Anda dapat menggunakan kelas untuk membuat objek:

instansi

let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);

Coba Sendiri

contoh di atas menggunakan Kelas Cartelah dibuat dua Objek Car.

Metode constructor akan dipanggil otomatis saat membuat objek baru.

Metode Constructor

Metode konstruktor adalah metode khusus:

  • Harus memiliki nama yang pasti "constructor"
  • Dijalankan otomatis saat membuat objek baru
  • Untuk menginisialisasi properti objek
  • Jika metode konstruktor belum didefinisikan, JavaScript akan menambahkan metode konstruktor kosong.

Metode Class

Pembuatan metode kelas

Sintaks

dengan metode objek.

Gunakan kata kunci class Buat kelas.

Selalu tambahkan constructor() Metode.

Lalu tambahkan sejumlah metode apapun.

Sintaks

class ClassName {
  constructor() { ... }
  method_1() { ... }
  method_2() { ... }
  method_3() { ... }
}

Buat metode kelas bernama "age" yang mengembalikan umur kendaraan:

instansi

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    let date = new Date();
    return date.getFullYear() - this.year;
  }
}
let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML = "My car is " + myCar.age() + " years old.";

Coba Sendiri

Anda dapat mengirim parameter ke metode kelas:

instansi

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age(x) {
    kembalikan x - this.year;
  }
}
let date = new Date();
let year = date.getFullYear();
let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML = "Kereta saya adalah " + myCar.age(year) + " tahun tua.";

Coba Sendiri

Dukungan Browser

Tabel di bawah ini menunjukkan versi browser yang mendukung penuh kelas JavaScript:

Chrome IE Firefox Safari Opera
Chrome 49 Edge 12 Firefox 45 Safari 9 Opera 36
Maret 2016 Juli 2015 Maret 2016 Oktober 2015 Maret 2016

Pada tutorial ini, Anda akan belajar lebih banyak tentang kelas JavaScript.