Class Inheritance
Untuk membuat pewarisan kelas, gunakan kata kunci extends.
Kelas yang dibuat dengan pewarisan kelas akan mewarisi semua metode dari kelas lain.
Contoh:
Buat kelas bernama “Model” yang akan mewarisi metode dari kelas “Car”.
<!DOCTYPE html> <html> <body> <h2>JavaScript Class Inheritance</h2> <p> Gunakan kata kunci "extends" untuk mewarisi semua metode dari kelas lain. </p> <p> Gunakan metode "super" untuk memanggil fungsi konstruktor induknya. </p> <p id="demo"></p> <script> class Car { constructor(brand) { this.carname = brand; } present() { return 'I have a ' + this.carname; } } class Model extends Car { constructor(brand, mod) { super(brand); this.model = mod; } show() { return this.present() + ', it is a ' + this.model; } } let myCar = new Model("Ford", "Mustang"); document.getElementById("demo").innerHTML = myCar.show(); </script> </body> </html>
Metode super () mengacu pada kelas induk.
Dengan memanggil metode super() dalam metode konstruktor, kita akan memanggil metode konstruktor induk dan mendapatkan akses ke properti dan metode induk.
Pewarisan berguna untuk menggunakan kembali kode: menggunakan kembali properti dan metode kelas yang ada saat ingin membuat kelas baru.
Getter and Setter
Sebuah class juga memungkinkan untuk menggunakan getter dan setter.
Sebaiknya gunakan getter dan setter untuk properti, terutama jika ingin melakukan sesuatu yang istimewa dengan nilai sebelum mengembalikannya, atau sebelum mengaturnya.
Untuk menambahkan getter dan setter di kelas, gunakan keyword get dan set.
Contoh:
Buat getter dan setter untuk properti “carname”.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Class Gettter/Setter</h2>
<p> Demonstrasi tentang cara menambahkan getter dan setter di kelas, dan cara menggunakan getter untuk mendapatkan nilai properti. </p>
<p id="demo"></p>
<script>
class Car {
constructor(brand) {
this.carname = brand;
}
get cnam() {
return this.carname;
}
set cnam(x) {
this.carname = x;
}
}
let myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.cnam;
</script>
</body>
</html>
Catatan: meskipun getter adalah metode namun tidak perlu menggunakan tanda kurung saat ingin mendapatkan nilai properti.
Nama metode getter/ settrt tidak boleh sama dengan nama properti, dalam hal ini carname.
Banyak programmer menggunakan karakter garis bawah _ sebelum nama properti untuk memisahkan getter/ setter dari properti sebenarnya.
Contoh:
Anda dapat menggunakan karakter garis bawah untuk memisahkan getter/ setter dari properti sebenarnya.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Class Gettter/Setter</h2>
<p> Menggunakan karakter garis bawah adalah penggunaan umum saat menggunakan getter / setter dalam JavaScript, tetapi tidak wajib, Anda dapat menamainya sesuka Anda, tetapi tidak boleh sama dengan nama properti. </p>
<p id="demo"></p>
<script>
class Car {
constructor(brand) {
this._carname = brand;
}
get carname() {
return this._carname;
}
set carname(x) {
this._carname = x;
}
}
let myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.carname;
</script>
</body>
</html>
Untuk menggunakan setter, gunakan sintaks yang sama seperti saat mengatur nilai properti, tanpa tanda kurung.
Contoh:
Gunakan setter untuk mengubah carname menjadi “Volvo”.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Class Setter</h2>
<p>Saat menggunakan setter untuk mengatur nilai properti, tidak perlu menggunakan tanda kurung.</p>
<p id="demo"></p>
<script>
class Car {
constructor(brand) {
this._carname = brand;
}
set carname(x) {
this._carname = x;
}
get carname() {
return this._carname;
}
}
let myCar = new Car("Ford");
myCar.carname = "Volvo";
document.getElementById("demo").innerHTML = myCar.carname;
</script>
</body>
</html>
Hoisting
Tidak seperti fungsi, dan deklarasi JavaScript lainnya, deklarasi kelas tidak diangkat.
Yang berarti kita harus mendeklarasikan sebuah kelas sebelum dapat menggunakannya.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Classes are not hoisted</h2>
<p>Kita akan mendapatkan pesan kesalahan jika mencoba menggunakan kelas sebelum dideklarasikan. </p>
<p id="demo"></p>
<script>
//You cannot use the class yet.
//myCar = new Car("Ford")
//This would raise an error.
class Car {
constructor(brand) {
this.carname = brand;
}
}
//Now you can use the class:
let myCar = new Car("Ford")
</script>
</body>
</html>
Catatan: Untuk deklarasi lain, seperti fungsi, kita TIDAK akan mendapatkan error saat mencoba menggunakannya sebelum fungsi tersebut dideklarasikan, karena default behavior deklarasi pada JavaScript sedang diangkat (hoisting) atau memindahkan deklarasi ke atas.
