継承、super、コンポジションを優先する場面

全体像

extendsとsuper

// Base class with a small field and method
class Animal {
  constructor(name) {
    this.name = name;
  }
  info() {
    return "Animal:" + this.name;
  }
}

// Child class extends the base and calls super(...)
class Dog extends Animal {
  constructor(name, breed) {
    // must call super() before using this
    super(name);
    this.breed = breed;
  }
  speak() {
    return "woof";
  }
}

const d = new Dog("Milo", "Beagle");
console.log(d.info(), d.speak());

メソッドのオーバーライド

// Override a method; keep parent behavior with super.method()
class Button {
  click() {
    return "base-click";
  }
}

class IconButton extends Button {
  click() {
    // call parent behavior, then add something
    const base = super.click();
    return base + "+icon";
  }
}

const b = new IconButton();
console.log(b.click()); // "base-click+icon"

has-aならcompositionを優先する

// Composition: use a helper object instead of extending
class Logger {
  log(msg) {
    console.log("[log]", msg);
  }
}

class Player {
  constructor(name, logger) {
    this.name = name;
    this.logger = logger; // has-a logger
  }
  score(points) {
    this.logger.log(this.name + " +" + points);
  }
}

const logger = new Logger();
const p = new Player("Ayla", logger);
p.score(5);

is-aとhas-a

// Use instanceof for a quick is-a check
console.log("Dog is Animal?", d instanceof Animal);
console.log("Player is Animal?", p instanceof Animal);

初心者向けの習慣

super(...)の基礎クイズ

まとめ