Inheritance Dalam OOP Javascript (Parent Class & Child Class)

Inheritance Dalam OOP Javascript (Parent Class & Child Class)
Dalam gambaran dunia nyata, banyak objek yang berbeda namun memiliki kesamaan atau kesamaan tertentu.
Misalnya mobil dengan motor mempunyai banyak kesamaan sebab objek itu merupakan kendaraan. Mobil merupakan kendaraan darat begitu pula dengan motor. Mungkin yang membedakan objek itu ialah jumlah roda dan kapasitas penumpang yang bisa ditampung.
Seperti halnya pada OOP, beberapa objek yang berbeda bisa jadi mempunyai kesamaan dalam hal tertentu. Di situlah konsep inheritance atau pewarisan harus diterapkan. Pewarisan bisa mencegah kita melakukan perulangan kode. Untuk lebih memahaminya lihatlah contoh bagan dalam sebuah kelas berikut:
Inheritance Dalam OOP Javascript (Parent Class & Child Class)

Inheritance Dalam OOP Javascript (Parent Class & Child Class)

Pada bagan di atas kita bisa lihat class CarMotorcyclePlane, dan Helicopter mempunyai banyak properti yang sama seperti lisencePlatemanufacture, dan engineActive. Kemudian mempunyai beberapa method yang sama seperti startEngines()info(), dan parking().
Bila kita ubah diagram class Car di atas jadi sebuah kode maka kode terlihat semacam ini:
    1. class Car {
    1.     constructor(licensePlate, manufacture, wheels) {
    1.         this.licensePlate = licensePlate;
    1.         this.manufacture = manufacture;
    1.         this.wheels = wheels;
    1.         this.engineActive = false;
    1.     }
    1.     
    1.     startEngines() {
    1.         console.log(`Mesin kendaraan ${this.licensePlate} dinyalakan!`);
    1.     }
    1.     
    1.     info() {
    1.         console.log(`Nomor Kendaraan: ${this.licensePlate}`);
    1.         console.log(`Manufacture: ${this.manufacture}`);
    1.         console.log(`Mesin: ${this.engineActive ? “Active”: “Inactive”}`);
    1.     }
    1.     
    1.     droveOff() {
    1.         console.log(`Kendaraan ${this.licensePlate} melesat!`)
    1.     }
    1.     
    1.     openDoor() {
    1.         console.log(`Membuka pintu!`)
    1.     }
    1.     
    1.     parking() {
    1.         console.log(`Kendaraan ${this.licensePlate} parkir!`);
    1.     }
    2. }

Tak ada masalah dengan kode itu, namun bila kita akan membuat kelas lainnya seperti MotorcyclePlane, dan Helicopter maka kita perlu menuliskan properti dan method yang sama secara berulang.
Dengan teknik inheritance, kita dapat mengelompokkan properti dan method yang sama. Caranya dengan membikin sebuah kelas baru yang kemudian akan diturunkan sifatnya pada class lain:
Inheritance Dalam OOP Javascript (Parent Class & Child Class)

Inheritance Dalam OOP Javascript (Parent Class & Child Class)

Saat class Vehicle sudah dibuat, kelas lainnya bisa melakukan extends pada kelas itu untuk mewarisi sifatnya. Dalam pewarisan, class Vehicle bisa disebut sebagai super atau parent class. Kelas yang mewarisi sifat dari parent class disebut dengan child class.
Pada JavaScript bila kita mau mewariskan sifat class, lakukan dengan keyword extends seperti berikut:
    1. class ChildClass extends ParentClass {
    1. }

Sebagai contoh ayo kita buat class Vehicle yang kemudian akan kita pakai sebagai parent class.
    1. class Vehicle {
    1.     constructor(licensePlate, manufacture) {
    1.         this.licensePlate = licensePlate;
    1.         this.manufacture = manufacture;
    1.         this.engineActive = false;
    1.     }
    1.     
    1.     startEngines() {
    1.         console.log(`Mesin kendaraan ${this.licensePlate} dinyalakan!`);
    1.     }
    1.     
    1.     info() {
    1.         console.log(`Nomor Kendaraan: ${this.licensePlate}`);
    1.         console.log(`Manufacture: ${this.manufacture}`);
    1.         console.log(`Mesin: ${this.engineActive ? “Active”: “Inactive”}`);
    1.     }
    1.     
    1.     parking() {
    1.         console.log(`Kendaraan ${this.licensePlate} parkir!`);
    1.     }
    2. }

Lalu kita dapat membuat class Car sebagai child class dari Vehicle.
    1. class Car extends Vehicle {
    1.    constructor(licensePlate, manufacture, wheels) {
    1.        super(licensePlate, manufacture);
    1.        this.wheels = wheels;
    1.    }
    1.  
    1.    droveOff() {
    1.      console.log(`Kendaraan ${this.licensePlate} melesat!`);
    1.    }
    1.  
    1.    openDoor() {
    1.      console.log(`Membuka pintu!`);
    1.    }
    2. }

Dengan seperti itu selain properti dan method yang ada di dalamnya, class Car juga bisa mengakses semua properti dan method yang terdapat di class Vehicle.
    1. class Vehicle {
    1.    constructor(licensePlate, manufacture) {
    1.        this.licensePlate = licensePlate;
    1.        this.manufacture = manufacture;
    1.        this.engineActive = false;
    1.    }
    1.   
    1.    startEngines() {
    1.        console.log(`Mesin kendaraan ${this.licensePlate} dinyalakan!`);
    1.    }
    1.   
    1.    info() {
    1.        console.log(`Nomor Kendaraan: ${this.licensePlate}`);
    1.        console.log(`Manufacture: ${this.manufacture}`);
    1.        console.log(`Mesin: ${this.engineActive ? “Active”: “Inactive”}`);
    1.    }
    1.   
    1.    parking() {
    1.        console.log(`Kendaraan ${this.licensePlate} parkir!`);
    1.    }
    1. }
    1.  
    1. class Car extends Vehicle {
    1.    constructor(licensePlate, manufacture, wheels) {
    1.        super(licensePlate, manufacture);
    1.        this.wheels = wheels;
    1.    }
    1.  
    1.    droveOff() {
    1.      console.log(`Kendaraan ${this.licensePlate} melesat!`);
    1.    }
    1.  
    1.    openDoor() {
    1.      console.log(`Membuka pintu!`);
    1.    }
    1. }
    1.  
    1. const car = new Car(“H121S”, “Honda”, 4);
    1. car.startEngines();
    1.  
    1. /* output:
    1. Mesin kendaraan H121S dinyalakan!
    2. */

Oiya pada constructor class Car, kita melihat pemakaian super(), apa itu maksudnya? Keyword super dipakai untuk mengakses properti dan method yang ada di induk class saat berada di child class. Jadi super(lisencePlate, manufacture) di atas berarti kita mengakses constructor dari parent class dan mengirimkan lisencePlate, dan manufacture sebagai data yang diperlukan olehnya supaya objek (instanceCar berhasil dibuat.
Pemakaian super sangat berguna saat kita akan menjalankan method overriding pada method parent. Misalnya kita akan melakukan method overriding pada method info() dengan menambahkan informasi jumlah roda pada mobil, maka kita bisa melakukannya dengan semacam ini:
    1. class Car extends Vehicle {
    1.    constructor(licensePlate, manufacture, wheels) {
    1.        super(licensePlate, manufacture);
    1.        this.wheels = wheels;
    1.    }
    1.  
    1.    droveOff() {
    1.      console.log(`Kendaraan ${this.licensePlate} melesat!`);
    1.    }
    1.  
    1.    openDoor() {
    1.      console.log(`Membuka pintu!`);
    1.    }
    1.  
    1.    /* overriding method info dari parent class */
    1.    info() {
    1.      super.info();
    1.      console.log(`Jumlah roda: ${this.wheels}`);
    1.    }
    1. }
    1.  
    1. const johnCar = new Car(“H121S”, “Honda”, 4);
    1. johnCar.info();
    1.  
    1. /* output:
    1. Nomor Kendaraan: H121S
    1. Manufacture: Honda
    1. Mesin: Inactive
    1. Jumlah roda: 4
    2. */

Dalam melakukan pewarisan kelas, tak ada tingkatan yang membatasinya. Maksudnya, kita bisa mewariskan sifat kelas A pada kelas B, lalu kelas B mewarisi sifatnya kembali pada kelas C dan berikutnya. Seperti halnya dengan Nenek kita mewarisi sifatnya kepada orang tua kita kemudian orang tua kita mewarisi sifatnya kepada kita.
Sehingga bila dilihat dari bagan sebelumnya, class itu masih dapat digolongkan kembali jadi semacam ini:
Inheritance Dalam OOP Javascript (Parent Class & Child Class)

Inheritance Dalam OOP Javascript (Parent Class & Child Class)


Butuh jasa pembuatan website di Makassar? kontak kami. Jasa Pembuatan Aplikasi Android, Jasa SEO dan SEM, SMM, Internet Marketing Agency, Social Media Strategist Makassar, Pembuatan Logo, Konten, Video, Maskot dan Instalasi jaringan ataupun mikrotik bisa kami lakukan

Recommended Posts

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

WhatsApp chat