Inheritance vs Composition/Delegation

delegation.js

class Rect {
  constructor(x, y, w, h) {
    this.x = x
    this.y = y
    this.w = w
    this.h = h
  }

  move(dx, dy) {
    // ...
  }
}

class Physics {
  constructor() {
    this.xvel = 0
    this.yvel = 0
  }

  updatePosition(rect, elapsed) {
    rect.x += this.xvel * elapsed
    rect.y += this.yvel * elapsed
  }

  resolveCollision(rect, other) {
    // ...
  }
}

class Player {
  constructor(x, y) {
    this.rect = new Rect(x, y, 50, 50)
    this.physics = new Physics()
  }

  update(elapsed) {
    this.physics.update(this.rect, elapsed)
  }

  draw(canvas) {
    this.rect.draw()
  }
}

inheritance.js

class Rect {
  constructor(x, y, w, h) {
    this.x = x
    this.y = y
    this.w = w
    this.h = h
  }

  move(dx, dy) {
    // ...
  }
  
  draw(canvas) {
    // ...
  }
}

class PhysicsObject extends Rect {
  constructor(x, y, w, h) {
    super(x, y, w, h)
    this.xvel = 0
    this.yvel = 0
  }

  updatePosition(elapsed) {
    this.x += this.xvel * elapsed
    this.y += this.yvel * elapsed
  }

  resolveCollision(other) {
    // ...
  }
}

class Player extends PhysicsObject {
  constructor(x, y) {
    super(x, y, 50, 50)
  }

  update(elapsed) {
    this.updatePosition(elapsed)
  }

  draw(canvas) {
    this.draw(canvas)
  }
}