Inheritance Dalam OOP Javascript (Parent Class & Child Class)

Inheritance Dalam OOP Javascript (Parent Class & Child Class)

fezarzone    09.43    Comment   

Dalam gambaran dunia nyata, banyak objek yang berbeda tetapi punya kesamaan atau kemiripan tertentu. 

Contohnya mobil dengan motor memiliki banyak kesamaan karena objek tersebut merupakan kendaraan. Mobil merupakan kendaraan darat begitu juga dengan motor. Mungkin yang membedakan objek tersebut adalah jumlah roda dan kapasitas penumpang yang dapat ditampung. 

Sama halnya pada OOP, beberapa objek yang berbeda bisa saja memiliki kesamaan dalam hal tertentu. Di situlah konsep inheritance atau pewarisan harus diterapkan. Pewarisan dapat mencegah kita melakukan perulangan kode. Untuk lebih memahaminya lihatlah contoh bagan pada sebuah kelas berikut:

Pada bagan di atas kita dapat lihat class Car, Motorcycle, Plane, dan Helicopter memiliki banyak properti yang sama seperti lisencePlate, manufacture, dan engineActive. Kemudian memiliki beberapa method yang sama seperti startEngines(), info(), dan parking().

Jika kita ubah diagram class Car di atas menjadi sebuah kode maka kode tampak seperti ini:

class Car {
    constructor(licensePlate, manufacture, wheels) {
        this.licensePlate = licensePlate;
        this.manufacture = manufacture;
        this.wheels = wheels;
        this.engineActive = false;
    }
    
    startEngines() {
        console.log(`Mesin kendaraan ${this.licensePlate} dinyalakan!`);
    }
    
    info() {
        console.log(`Nomor Kendaraan: ${this.licensePlate}`);
        console.log(`Manufacture: ${this.manufacture}`);
        console.log(`Mesin: ${this.engineActive ? "Active": "Inactive"}`);
    }
    
    droveOff() {
        console.log(`Kendaraan ${this.licensePlate} melaju!`)
    }
    
    openDoor() {
        console.log(`Membuka pintu!`)
    }
    
    parking() {
        console.log(`Kendaraan ${this.licensePlate} parkir!`);
    }
}

Tidak ada masalah dengan kode tersebut, tetapi jika kita akan membuat kelas lainnya seperti Motorcycle, Plane, dan Helicopter maka kita harus menuliskan properti dan method yang sama secara berulang. 

Dengan teknik inheritance, kita bisa mengelompokkan properti dan method yang sama. Caranya dengan membuat sebuah kelas baru yang nantinya akan diturunkan sifatnya pada class lain:

Ketika class Vehicle telah dibuat, kelas lainnya dapat melakukan extends pada kelas tersebut untuk mewarisi sifatnya. Dalam pewarisan, class Vehicle dapat disebut sebagai super atau parent class. Kelas yang mewarisi sifat dari parent class disebut dengan child class.

Pada JavaScript jika kita ingin mewariskan sifat class, lakukan dengan keyword extends seperti berikut:

class ChildClass extends ParentClass {
    
}

Sebagai contoh mari kita buat class Vehicle yang nantinya akan kita gunakan sebagai parent class.

class Vehicle {
    constructor(licensePlate, manufacture) {
        this.licensePlate = licensePlate;
        this.manufacture = manufacture;
        this.engineActive = false;
    }
    
    startEngines() {
        console.log(`Mesin kendaraan ${this.licensePlate} dinyalakan!`);
    }
    
    info() {
        console.log(`Nomor Kendaraan: ${this.licensePlate}`);
        console.log(`Manufacture: ${this.manufacture}`);
        console.log(`Mesin: ${this.engineActive ? "Active": "Inactive"}`);
    }
    
    parking() {
        console.log(`Kendaraan ${this.licensePlate} parkir!`);
    }
}

Kemudian kita bisa membuat class Car sebagai child class dari Vehicle.

class Car extends Vehicle {
   constructor(licensePlate, manufacture, wheels) {
       super(licensePlate, manufacture);
       this.wheels = wheels;
   }
 
   droveOff() {
     console.log(`Kendaraan ${this.licensePlate} melaju!`);
   }
 
   openDoor() {
     console.log(`Membuka pintu!`);
   }
}

Dengan begitu selain properti dan method yang terdapat di dalamnya, class Car juga dapat mengakses seluruh properti dan method yang terdapat pada class Vehicle.

class Vehicle {
   constructor(licensePlate, manufacture) {
       this.licensePlate = licensePlate;
       this.manufacture = manufacture;
       this.engineActive = false;
   }
  
   startEngines() {
       console.log(`Mesin kendaraan ${this.licensePlate} dinyalakan!`);
   }
  
   info() {
       console.log(`Nomor Kendaraan: ${this.licensePlate}`);
       console.log(`Manufacture: ${this.manufacture}`);
       console.log(`Mesin: ${this.engineActive ? "Active": "Inactive"}`);
   }
  
   parking() {
       console.log(`Kendaraan ${this.licensePlate} parkir!`);
   }
}
 
class Car extends Vehicle {
   constructor(licensePlate, manufacture, wheels) {
       super(licensePlate, manufacture);
       this.wheels = wheels;
   }
 
   droveOff() {
     console.log(`Kendaraan ${this.licensePlate} melaju!`);
   }
 
   openDoor() {
     console.log(`Membuka pintu!`);
   }
}
 
const car = new Car("H121S", "Honda", 4);
car.startEngines();
 
/* output:
Mesin kendaraan H121S dinyalakan!
*/

Oiya pada constructor class Car, kita melihat penggunaan super(), apa itu maksudnya? Keyword super digunakan untuk mengakses properti dan method yang ada pada induk class ketika berada pada child class. Jadi super(lisencePlate, manufacture) di atas berarti kita mengakses constructor dari parent class dan mengirimkan lisencePlate, dan manufacture sebagai data yang dibutuhkan olehnya agar objek (instance) Car berhasil dibuat.

Penggunaan super sangat berguna ketika kita hendak menjalankan method overriding pada method parent. Contohnya kita akan melakukan method overriding pada method info() dengan menambahkan informasi jumlah roda pada mobil, maka kita dapat melakukannya dengan seperti ini:

class Car extends Vehicle {
   constructor(licensePlate, manufacture, wheels) {
       super(licensePlate, manufacture);
       this.wheels = wheels;
   }
 
   droveOff() {
     console.log(`Kendaraan ${this.licensePlate} melaju!`);
   }
 
   openDoor() {
     console.log(`Membuka pintu!`);
   }
 
   /* overriding method info dari parent class */
   info() {
     super.info();
     console.log(`Jumlah roda: ${this.wheels}`);
   }
}
 
const johnCar = new Car("H121S", "Honda", 4);
johnCar.info();
 
/* output:
Nomor Kendaraan: H121S
Manufacture: Honda
Mesin: Inactive
Jumlah roda: 4
*/

Dalam melakukan pewarisan kelas, tidak ada tingkatan yang membatasinya. Maksudnya, kita dapat mewariskan sifat kelas A pada kelas B, lalu kelas B mewarisi sifatnya kembali pada kelas C dan selanjutnya. Sama halnya dengan Nenek kita mewarisi sifatnya kepada orang tua kita kemudian orang tua kita mewarisi sifatnya kepada kita. 

Sehingga jika dilihat dari bagan sebelumnya, class tersebut masih bisa dikelompokkan kembali menjadi seperti ini:

Cara Menambahkan Method didalam Class Javascript

Cara Menambahkan Method didalam Class Javascript

fezarzone    09.21    Comment   

Untuk menambahkan method pada class, kita juga cukup menuliskannya pada body class, tidak perlu melalui prototype seperti menggunakan constructor function.

class Car {
    constructor(manufacture, color) {
        this.manufacture = manufacture;
        this.color = color;
        this.enginesActive = false;
    }
    
    startEngines() {
        console.log("Mesin dinyalakan");
        this.enginesActive = true;
    }
    
    info() {
        console.log(`Manufacture: ${this.manufacture}`);
        console.log(`Color: ${this.color}`);
        console.log(`Engines: ${this.manufacture ? "Active" : "Inactive"}`);
    }
}
 
const johnCar = new Car("Honda", "Red");
 
johnCar.startEngines();
johnCar.info();
 
 
/* output:
Mesin dinyalakan
Manufacture: Honda
Color: Red
Engines: Active
*/

Dengan menggunakan class, walaupun kita menuliskan method pada body class, namun method tersebut tetap berada pada prototype chain miliki instance yang terbuat. Kita bisa melihat bagaimana objek yang dibuat menggunakan class pada console browser

Property Accessor didalam Object Class Javascript

Property Accessor didalam Object Class Javascript

fezarzone    09.17    Comment   

Melalui objek class kita juga dapat mengubah nilai properti seperti ini:

class Car {
    constructor(manufacture, color) {
        this.manufacture = manufacture;
        this.color = color;
        this.enginesActive = false;
    }
}
 
const johnCar = new Car("Honda", "Red");
console.log(`Warna mobil: ${johnCar.color}`); // output -> Warna Mobil: Red
 
johnCar.color = "White"; // Mengubah nilai properti color menjadi white
 
console.log(`Warna mobil: ${johnCar.color}`); // output -> Warna Mobil: White

Dengan class kita juga dapat mengimplementasi getter/setter sebuah properti menjadi sebuah method seperti ini:

class Car {
    constructor(manufacture, color) {
        this.manufacture = manufacture;
        this._color = color;
        this.enginesActive = false;
    }
    
    get color() {
        return `Warna mobile ${this._color}`;
    }
    
    set color(value) {
        console.log(`Warna mobil diubah dari ${this._color} menjadi ${value}`);
        this._color = value;
    }
}
 
const johnCar = new Car("Honda", "Red");
console.log(johnCar.color); // output -> Warna Mobil: Red
johnCar.color = "White"; // Mengubah nilai properti color menjadi white
console.log(johnCar.color); // output -> Warna Mobil: White

Perhatikan juga ketika kita menerapkan getter/setter pada properti class. Kita perlu mengubah atau membedakan penamaan properti aslinya dengan property accessor yang kita buat. Berdasarkan code convention yang ada kita perlu mengubah properti asli class-nya dengan menambahkan underscore di depan nama propertinya (_color). Tanda underscore berfungsi sebagai tanda bahwa properti _color tidak sebaiknya diakses langsung, namun harus melalui property accessor (getter/setter)