Batas Pewarisan Mendalam

Termasuk bagian Pemrograman Berorientasi Objek dalam perjalanan JavaScript di Coddy. Pelajaran 48 dari 56.

Meskipun pewarisan berguna, membuat hierarki pewarisan yang sangat dalam (induk → anak → cucu → cicit) dapat menimbulkan masalah. Semakin dalam rantainya, semakin sulit untuk memahami, memelihara, dan mengubah kodemu.

Mari kita lihat apa yang terjadi pada rantai pewarisan yang dalam:

// class dasar
class Vehicle {
  constructor(type) {
    this.type = type;
    this.isRunning = false;
  }
  
  start() {
    this.isRunning = true;
    console.log(`${this.type} started`);
  }
}

// Tingkat pertama pewarisan
class Car extends Vehicle {
  constructor(make, model) {
    super("Car");
    this.make = make;
    this.model = model;
    this.wheels = 4;
  }
  
  honk() {
    console.log("Beep beep!");
  }
}

// Tingkat kedua pewarisan
class SportsCar extends Car {
  constructor(make, model, topSpeed) {
    super(make, model);
    this.topSpeed = topSpeed;
  }
  
  race() {
    this.start();
    console.log(`Racing at ${this.topSpeed} mph!`);
  }
}

Dalam contoh ini, SportsCar berada dua tingkat di bawah dalam pewarisan. Hal ini dapat menimbulkan beberapa masalah:

Perubahan pada Vehicle mungkin secara tak terduga merusak SportsCar

Seiring bertambah panjangnya rantai pewarisan, semakin sulit melacak asal method dan property

Kamu terpaksa menggunakan hubungan "is-a" yang mungkin kurang fleksibel

Tantangan

Lengkapi file Robot.js agar robot berfungsi. Saat ini, robot sudah dibuat, tetapi belum bisa melakukan apa pun.

Yang harus dilakukan di Robot.js:

Buat komponen speaker dan mover di dalam constructor Robot
Gunakan komponen tersebut dalam method:
1. Di greet(): Panggil this.speaker.speak("Hello!");
2. Di walkForward(): Panggil this.mover.move("forward");

Alasan kita melakukan ini: Ini adalah komposisi, robot dibuat dengan menggabungkan komponen-komponen yang lebih kecil. Robot memiliki speaker (untuk berbicara) dan memiliki mover (untuk bergerak), bukan mewarisi kemampuan tersebut.

Coba sendiri

import { Robot } from './Robot.js';

const myRobot = new Robot('Robo');

myRobot.greet();     // Seharusnya menghasilkan output: Saying: "Hello!"
myRobot.walkForward(); // Seharusnya menghasilkan output: Moving forward