Kelas JavaScript

ECMAScript 2015, disebut juga ES6, memperkenalkan kelas JavaScript.

Kelas JavaScript adalah templat objek JavaScript.

Bentuk kalimat JavaScript

Gunakan kata kunci class Buat kelas.

Selalu tambahkan method bernama constructor() dengan method:

Syntax

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

Contoh

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 adalah objek JavaScriptTemplate.

Menggunakan kelas

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

Contoh

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

Coba Sendiri

Contoh di atas menggunakan Kelas Caruntuk membuat dua Objek Car.

Method constructor akan dipanggil otomatis saat membuat objek baru (constructor method).

Method constructor

Method constructor adalah method khusus:

  • Harus mempunyai nama yang tepat "constructor"
  • Dijalankan otomatis saat membuat objek baru
  • Untuk menginisialisasi properti objek
  • Jika Anda belum mendefinisikan method constructor, JavaScript akan menambahkan method constructor kosong.

Method kelas

Syntax method kelas sama seperti method objek.

Buat kelas dengan menggunakan kata kunci class.

Selalu tambahkan method constructor().

Lalu tambahkan jumlah method yang berbeda.

Syntax

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

Buat method kelas bernama "age" yang mengembalikan tahun kendaraan:

Contoh

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 method kelas:

Contoh

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

Coba Sendiri

Dukungan browser

Tabel di bawah menunjukkan versi browser yang pertama yang sepenuhnya mendukung JavaScript class:

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

"use strict"

Syarat kalimat dalam kelas harus ditulis dalam 'Mode Ketat'.

Anda akan menerima pesan kesalahan jika Anda tidak mengikuti aturan 'Mode Ketat'.

Contoh

Dalam 'Mode Ketat', jika Anda menggunakan variabel tanpa mendeklarasikannya, Anda akan mendapatkan kesalahan:

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    // date = new Date();  // Ini akan gagal
    let date = new Date(); // Ini akan berfungsi
    return date.getFullYear() - this.year;
  }
}

Coba Sendiri

Di Mode Ketat JS Pelajari lebih banyak tentang 'Mode Ketat' di sini.