Kelas JavaScript
ECMAScript 2015, juga dikenal sebagai ES6, memperkenalkan Kelas JavaScript.
Kelas JavaScript adalah template untuk Objek JavaScript.
Sintaks Kelas JavaScript
Gunakan kata kunci classuntuk membuat kelas.
Selalu tambahkan metode bernama constructor():
Sintaksis
class ClassName {
constructor() { ... }
}
Contoh
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
Contoh di atas membuat kelas bernama "Mobil".
Kelas memiliki dua properti awal: "nama" dan "tahun".
Kelas JavaScript bukan objek.
Ini adalah template untuk objek JavaScript.
Menggunakan Kelas
Saat Anda memiliki kelas, Anda dapat menggunakan kelas tersebut untuk membuat objek:
Contoh
let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);
Contoh di atas menggunakan kelas Car untuk membuat dua objek Car .
Metode konstruktor dipanggil secara otomatis ketika objek baru dibuat.
Metode Konstruktor
Metode konstruktor adalah metode khusus:
- Itu harus memiliki nama yang tepat "konstruktor"
- Itu dijalankan secara otomatis ketika objek baru dibuat
- Ini digunakan untuk menginisialisasi properti objek
Jika Anda tidak mendefinisikan metode konstruktor, JavaScript akan menambahkan metode konstruktor kosong.
Metode Kelas
Metode kelas dibuat dengan sintaks yang sama dengan metode objek.
Gunakan kata kunci classuntuk membuat kelas.
Selalu tambahkan constructor()metode.
Kemudian tambahkan sejumlah metode.
Sintaksis
class ClassName {
constructor() { ... }
method_1() { ... }
method_2() { ... }
method_3() { ... }
}
Buat metode Kelas bernama "usia", yang mengembalikan usia Mobil:
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.";
Anda dapat mengirim parameter ke metode 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.";
Dukungan Peramban
Tabel berikut mendefinisikan versi browser pertama dengan dukungan penuh untuk Kelas dalam JavaScript:
| Chrome 49 | Edge 12 | Firefox 45 | Safari 9 | Opera 36 |
| Mar, 2016 | Jul, 2015 | Mar, 2016 | Oct, 2015 | Mar, 2016 |
Anda akan belajar lebih banyak tentang Kelas JavaScript nanti dalam tutorial ini.