Những hạn chế của kế thừa nhiều tầng

Thuộc phần Lập trình hướng đối tượng trong hành trình JavaScript của Coddy. Bài học 48 trên 56.

Kế thừa rất hữu ích, nhưng tạo ra hệ thống phân cấp kế thừa quá sâu (cha → con → cháu → chắt) có thể gây ra vấn đề. Chuỗi càng sâu thì code càng khó hiểu, bảo trì và chỉnh sửa.

Hãy xem điều gì xảy ra với một chuỗi kế thừa nhiều cấp:

// Lớp cơ sở
class Vehicle {
  constructor(type) {
    this.type = type;
    this.isRunning = false;
  }
  
  start() {
    this.isRunning = true;
    console.log(`${this.type} started`);
  }
}

// Cấp kế thừa thứ nhất
class Car extends Vehicle {
  constructor(make, model) {
    super("Car");
    this.make = make;
    this.model = model;
    this.wheels = 4;
  }
  
  honk() {
    console.log("Beep beep!");
  }
}

// Cấp kế thừa thứ hai
class SportsCar extends Car {
  constructor(make, model, topSpeed) {
    super(make, model);
    this.topSpeed = topSpeed;
  }
  
  race() {
    this.start();
    console.log(`Racing at ${this.topSpeed} mph!`);
  }
}

Trong ví dụ này, SportsCar nằm sâu hai cấp trong hệ thống kế thừa. Điều này có thể dẫn đến một số vấn đề:

Những thay đổi ở Vehicle có thể bất ngờ khiến SportsCar gặp lỗi

Khi chuỗi kế thừa dài hơn, bạn sẽ khó theo dõi các phương thức và thuộc tính bắt nguồn từ đâu

Bạn buộc phải dùng các mối quan hệ “là một”, có thể không đủ linh hoạt

Thử thách

Hoàn thiện tệp Robot.js để robot hoạt động. Hiện tại, robot đã được tạo nhưng chưa thể làm gì.

Cần làm gì trong Robot.js:

Tạo các thành phần loa và bộ di chuyển bên trong hàm khởi tạo của Robot
Sử dụng các thành phần trong những phương thức:
1. Trong greet(): Gọi this.speaker.speak("Hello!");
2. Trong walkForward(): Gọi this.mover.move("forward");

Lý do thực hiện: Đây là cách kết hợp thành phần, robot được tạo bằng cách ghép các thành phần nhỏ hơn. Robot có một loa (để nói chuyện) và có một bộ di chuyển (để di chuyển), thay vì kế thừa những khả năng này.

Tự làm thử

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

const myRobot = new Robot('Robo');

myRobot.greet();     // Đầu ra dự kiến: Saying: "Hello!"
myRobot.walkForward(); // Đầu ra dự kiến: Moving forward