Inheritance dalam OOP JavaScript: Parent dan Child Class

Introduction

Dalam pemrograman berorientasi objek (OOP), inheritance atau pewarisan adalah konsep yang memungkinkan satu class mewarisi properti dan method dari class lainnya. Di JavaScript, konsep inheritance digunakan untuk menciptakan parent class dan child class, yang memungkinkan child class untuk mewarisi perilaku dan karakteristik dari parent class. Artikel ini akan membahas secara mendalam tentang inheritance dalam OOP JavaScript, perbedaan antara parent class dan child class, serta cara penggunaannya dengan contoh-contoh yang jelas.

1. Apa Itu Inheritance dalam OOP?

Inheritance dalam OOP adalah mekanisme di mana sebuah class (child class) mewarisi properti dan method dari class lainnya (parent class). Ini memungkinkan kita untuk mendefinisikan properti dan method umum di parent class, dan kemudian child class dapat menggunakannya atau mengubah perilakunya sesuai dengan kebutuhan.

Konsep inheritance mengurangi duplikasi kode karena child class tidak perlu mendefinisikan ulang properti dan method yang sudah ada di parent class. Sebagai gantinya, mereka cukup mewarisinya, yang membuat kode lebih efisien dan mudah dikelola.

2. Sintaks Dasar Inheritance di JavaScript

Di JavaScript, kita menggunakan kata kunci extends untuk mendefinisikan child class yang mewarisi dari parent class. Child class akan mendapatkan semua properti dan method dari parent class, kecuali jika ada overriding.

Contoh Sintaks Dasar:

javascript

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

    speak() {
        console.log(`${this.name} makes a sound.`);
    }
}

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

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

const dog = new Dog("Buddy", "Golden Retriever");
dog.speak();  // Output: Buddy barks.

Penjelasan:

class Animal adalah parent class yang memiliki properti name dan method speak().
class Dog extends Animal adalah child class yang mewarisi properti dan method dari class Animal.
super(name) digunakan untuk memanggil constructor dari parent class agar child class dapat mengakses properti yang ada di parent class.
Method speak() di child class Dog diubah (overriding) untuk memberi perilaku yang spesifik untuk dog (anjing).

3. Menggunakan Super untuk Memanggil Parent Class

Di dalam child class, kita menggunakan super() untuk memanggil constructor dari parent class dan super.method() untuk memanggil method yang ada di parent class. Ini sangat penting ketika child class ingin menggunakan atau memodifikasi perilaku dari parent class.

Contoh Memanggil Method dari Parent Class:

javascript

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

    speak() {
        console.log(`${this.name} makes a sound.`);
    }
}

class Cat extends Animal {
    constructor(name, color) {
        super(name);  // Memanggil constructor parent class
        this.color = color;
    }

    speak() {
        super.speak();  // Memanggil method speak() dari parent class
        console.log(`${this.name} meows.`);
    }
}

const cat = new Cat("Whiskers", "Black");
cat.speak();
// Output:
// Whiskers makes a sound.
// Whiskers meows.

Pada contoh di atas:

super.speak() digunakan untuk memanggil method speak() yang ada di parent class Animal, kemudian kita menambahkan perilaku khusus di child class Cat.

4. Menggunakan Inheritance untuk Mengurangi Duplikasi Kode

Salah satu keuntungan besar dari inheritance adalah pengurangan duplikasi kode. Dengan inheritance, kita bisa mendefinisikan fitur umum di parent class dan hanya menambahkan fitur tambahan di child class tanpa harus menulis ulang kode yang sudah ada.

Contoh Mengurangi Duplikasi Kode:

javascript

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

    drive() {
        console.log(`${this.brand} ${this.model} is driving.`);
    }
}

class Car extends Vehicle {
    constructor(brand, model, type) {
        super(brand, model);  // Memanggil constructor Vehicle
        this.type = type;
    }

    honk() {
        console.log(`${this.brand} ${this.model} honks.`);
    }
}

class Bike extends Vehicle {
    constructor(brand, model) {
        super(brand, model);  // Memanggil constructor Vehicle
    }

    ringBell() {
        console.log(`${this.brand} ${this.model} rings the bell.`);
    }
}

const car = new Car("Toyota", "Corolla", "Sedan");
car.drive();  // Output: Toyota Corolla is driving.
car.honk();   // Output: Toyota Corolla honks.

const bike = new Bike("Giant", "Escape 3");
bike.drive();  // Output: Giant Escape 3 is driving.
bike.ringBell();  // Output: Giant Escape 3 rings the bell.

Pada contoh di atas, kita mendefinisikan method drive() dalam parent class Vehicle, dan kedua child class Car dan Bike dapat langsung mengakses method tersebut tanpa perlu menulis ulang.

5. Overriding Method di Child Class

Child class dapat mengganti atau memodifikasi method yang diwarisi dari parent class. Proses ini disebut method overriding. Overriding memungkinkan child class untuk menyediakan implementasi khusus sesuai dengan kebutuhan mereka.

Contoh Overriding Method:

Di atas, method area() yang ada di parent class Shape diubah (overridden) dalam child class Circle untuk menghitung luas lingkaran.

6. Multilevel Inheritance

JavaScript juga mendukung multilevel inheritance, di mana child class bisa menjadi parent class bagi class lain.

Contoh Multilevel Inheritance:

javascript

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

    speak() {
        console.log(`${this.name} makes a sound.`);
    }
}

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

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

class Puppy extends Dog {
    constructor(name, breed, age) {
        super(name, breed);
        this.age = age;
    }

    speak() {
        console.log(`${this.name} is a puppy and barks.`);
    }
}

const puppy = new Puppy("Rex", "Labrador", 1);
puppy.speak();  // Output: Rex is a puppy and barks.

Pada contoh di atas, Puppy adalah child class dari Dog, yang pada gilirannya merupakan child class dari Animal. Setiap class dapat mengubah atau menambah method sesuai dengan kebutuhan mereka.

Kesimpulan

Inheritance adalah fitur yang sangat berguna dalam Object-Oriented Programming yang memungkinkan kita untuk membangun hierarki class dan mewariskan properti serta method dari parent class ke child class. Dengan menggunakan inheritance, kita dapat mengurangi duplikasi kode, meningkatkan modularitas, dan menjaga kode tetap terstruktur. Di JavaScript, kita dapat dengan mudah mengimplementasikan inheritance menggunakan extends dan super, serta melakukan method overriding untuk menyesuaikan perilaku yang diwarisi.

Pahami dan manfaatkan konsep parent class dan child class ini untuk menulis kode JavaScript yang lebih efisien, terstruktur, dan mudah dipelihara.

Inheritance Dalam OOP Javascript (Parent Class & Child Class)

ByTechStartNews

Introduction

1. Apa Itu Inheritance dalam OOP?

2. Sintaks Dasar Inheritance di JavaScript

Contoh Sintaks Dasar:

Penjelasan:

3. Menggunakan Super untuk Memanggil Parent Class

Contoh Memanggil Method dari Parent Class:

4. Menggunakan Inheritance untuk Mengurangi Duplikasi Kode

Contoh Mengurangi Duplikasi Kode:

5. Overriding Method di Child Class

Contoh Overriding Method:

6. Multilevel Inheritance

Contoh Multilevel Inheritance:

Kesimpulan

By TechStartNews

Related Post

Belajar Babel Loader Javascript ES6

Contoh Implementasi API dan Fetch API dalam Web Sederhana

Contoh Implementasi Ajax Menggunakan Fetch API di JavaScript

Anda Ketinggalan

O3 Mini oleh OpenAI: Perangkat AI Kompak dengan Fitur Canggih

Menjelang Peluncuran Samsung Galaxy S25, Harga Terbaru Samsung Galaxy S24 di Indonesia

Nintendo Konfirmasi Switch 2 Meluncur pada 2025

Revolusi Teknologi dengan Komputasi Kuantum