JavaScript - Pewarisan (Inheritance)

Hai teman-teman, para ahli JavaScript masa depan! Hari ini, kita akan memulai perjalanan yang menarik melalui dunia magis pewarisan dalam JavaScript. Jangan khawatir jika Anda baru saja memulai programming; saya akan menjadi panduan Anda yang ramah, dan kita akan mengexplore konsep ini secara bertahap. Jadi, ambil keyboard Anda (tongkat sihir Anda), dan mari kita masuk ke dalam!

Pemwarisan dalam JavaScript

Pemwarisan seperti menyampaikan traits keluarga, tapi dalam dunia programming. Bayangkan Anda membuat pohon keluarga dari objek, di mana anak dapat mewarisi properti dan metode dari orang tuanya. Keren, kan?

mari kita mulai dengan contoh sederhana:

class Animal {
constructor(name) {
this.name = name;
}

speak() {
console.log(`${this.name} membuat suara.`);
}
}

class Dog extends Animal {
bark() {
console.log(`${this.name} mengeong: Woof woof!`);
}
}

const myDog = new Dog("Buddy");
myDog.speak(); // Output: Buddy membuat suara.
myDog.bark();  // Output: Buddy mengeong: Woof woof!

Dalam contoh ini, Dog mewarisi dari Animal. Ini berarti Dog mendapatkan semua properti dan metode dari Animal, ditambah metode uniknya bark(). Itu seperti Buddy mewarisi kemampuan berbicara dari semua hewan, tapi juga memiliki kekuatan khusus mengeong!

Pemwarisan Single Class dalam JavaScript

Pemwarisan single class adalah saat sebuah kelas mewarisi dari hanya satu kelas induk. Itu seperti memiliki satu orang tua yang sangat keren yang Anda ingin belajar segala sesuatu darinya.

Berikut adalah contoh lain:

class Vehicle {
constructor(brand) {
this.brand = brand;
}

start() {
console.log(`Memulai ${this.brand}.`);
}
}

class Car extends Vehicle {
honk() {
console.log(`${this.brand} mobil bersuara beep beep!`);
}
}

const myCar = new Car("Toyota");
myCar.start(); // Output: Memulai Toyota.
myCar.honk();  // Output: Toyota mobil bersuara beep beep!

Di sini, Car mewarisi dari Vehicle. Itu seperti mobil Anda belajar bagaimana memulai dari konsep umum kendaraan, tapi juga tahu bagaimana menggeledek karena, well, itu adalah mobil!

Kata kunci super() dalam JavaScript

Sekarang, mari kita bicarakan kata kunci super(). Itu seperti memberi penghormatan kepada orang tua Anda, mengakui kontribusi mereka ke dalam kesempurnaan Anda.

class Animal {
constructor(name) {
this.name = name;
}
}

class Dog extends Animal {
constructor(name, breed) {
super(name); // Memanggil constructor induk
this.breed = breed;
}

introduce() {
console.log(`Saya ${this.name}, seekor ${this.breed} anjing.`);
}
}

const myDog = new Dog("Max", "Labrador");
myDog.introduce(); // Output: Saya Max, seekor Labrador anjing.

Pemanggilan super(name) di constructor Dog seperti mengatakan, "Hey, orang tua Animal, bisakah Anda mengatur nama untuk saya?" Itu adalah cara untuk mengguna ulang logika constructor induk.

Pemwarisan Multilevel dalam JavaScript

Pemwarisan multilevel seperti pohon keluarga dengan beberapa generasi. Mari kita lihat contoh:

class Animal {
constructor(name) {
this.name = name;
}

eat() {
console.log(`${this.name} makan.`);
}
}

class Dog extends Animal {
bark() {
console.log(`${this.name} berkata woof!`);
}
}

class Labrador extends Dog {
swim() {
console.log(`${this.name} sedang berenang.`);
}
}

const myDog = new Labrador("Charlie");
myDog.eat();  // Output: Charlie makan.
myDog.bark(); // Output: Charlie berkata woof!
myDog.swim(); // Output: Charlie sedang berenang.

Di sini, Labrador mewarisi dari Dog, yang mewarisi dari Animal. Itu seperti Charlie the Labrador belajar makan dari semua hewan, berkeong dari anjing, dan memiliki kemampuan khusus berenang.

Pemwarisan Hierarkis dalam JavaScript

Pemwarisan hierarkis adalah saat beberapa kelas mewarisi dari induk kelas tunggal. Itu seperti saudara kandung mewarisi traits dari orang tua yang sama.

class Vehicle {
constructor(brand) {
this.brand = brand;
}

start() {
console.log(`Memulai ${this.brand}.`);
}
}

class Car extends Vehicle {
drive() {
console.log(`Mengendarai ${this.brand} mobil.`);
}
}

class Motorcycle extends Vehicle {
wheelie() {
console.log(`Membuat wheelie di ${this.brand} motor!`);
}
}

const myCar = new Car("Toyota");
const myBike = new Motorcycle("Harley");

myCar.start();    // Output: Memulai Toyota.
myCar.drive();    // Output: Mengendarai Toyota mobil.

myBike.start();   // Output: Memulai Harley.
myBike.wheelie(); // Output: Membuat wheelie di Harley motor!

Kedua Car dan Motorcycle mewarisi dari Vehicle, tapi masing-masing memiliki metode uniknya.

Mewarisi Anggota Statik Kelas

Anggota statik milik kelas itu sendiri, bukan instance. Tetapi mereka masih dapat diwarisi! Mari kita lihat bagaimana:

class MathOperations {
static PI = 3.14159;

static calculateCircleArea(radius) {
return this.PI * radius * radius;
}
}

class AdvancedMath extends MathOperations {
static calculateSphereVolume(radius) {
return (4/3) * this.PI * radius * radius * radius;
}
}

console.log(AdvancedMath.PI); // Output: 3.14159
console.log(AdvancedMath.calculateCircleArea(5)); // Output: 78.53975
console.log(AdvancedMath.calculateSphereVolume(3)); // Output: 113.09733

Di sini, AdvancedMath mewarisi properti statik PI dan metode calculateCircleArea dari MathOperations.

Pemwarisan Berdasarkan Prototype dalam JavaScript

Sebelum kelas ES6, JavaScript menggunakan pemwarisan berdasarkan prototype. Itu sedikit lebih sulit, tapi tetap penting untuk dipahami:

function Animal(name) {
this.name = name;
}

Animal.prototype.speak = function() {
console.log(`${this.name} membuat suara.`);
};

function Dog(name) {
Animal.call(this, name);
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function() {
console.log(`${this.name} mengeong: Woof woof!`);
};

const myDog = new Dog("Rex");
myDog.speak(); // Output: Rex membuat suara.
myDog.bark();  // Output: Rex mengeong: Woof woof!

Ini mencapai hasil yang sama seperti contoh pertama kita, tapi menggunakan sintaksis prototype yang lebih tua.

Manfaat Pemwarisan

Pemwarisan dalam JavaScript menawarkan beberapa keuntungan:

1. Reusabilitas Kode
2. Ekstensi
3. Kemudahan Pemeliharaan
4. Polimorfisme

Berikut adalah tabel yang menggabungkan keuntungan ini:

Manfaat	Deskripsi
Reusabilitas Kode	Mewarisi properti dan metode dari kelas induk, mengurangi duplikasi
Ekstensi	Mudah menambahkan fitur baru ke kelas yang sudah ada
Kemudahan Pemeliharaan	Perubahan di kelas induk secara otomatis tercermin di kelas anak
Polimorfisme	Menggunakan objek kelas berbeda melalui interface yang sama

Ingat, dengan kekuatan yang besar datang tanggung jawab yang besar. Gunakan pemwarisan bijaksana, dan kode Anda akan berterima kasih!

Dan itu adalah, teman-teman! Kita telah melakukan perjalanan melalui negeri pemwarisan JavaScript. Saya harap panduan ini telah memberikan cahaya untuk Anda. Tetap latih, stay curious, dan happy coding!

Credits: Image by storyset