Kelas JavaScript
ECMAScript 2015, juga dikenal sebagai ES6, memperkenalkan Kelas JavaScript.
Kelas JavaScript adalah template untuk Objek JavaScript.
Sintaks Kelas JavaScript
Gunakan kata kunci class
untuk 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 class
untuk 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 |
"gunakan yang ketat"
Sintaks di kelas harus ditulis dalam "mode ketat".
Anda akan mendapatkan kesalahan jika Anda tidak mengikuti aturan "mode ketat".
Contoh
Dalam "mode ketat" Anda akan mendapatkan kesalahan jika Anda menggunakan variabel tanpa mendeklarasikannya:
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age() {
// date = new Date(); // This will not work
let date = new Date(); // This will work
return date.getFullYear() - this.year;
}
}
Pelajari lebih lanjut tentang "mode ketat" di: JS Strict Mode .