다중 상속이 가능한 클래스 코드 조각 Mixin(믹스인)

@ 제가 핵심이라고 생각하는 부분만을 다시 정리했습니다.
@ 자세한 내용은 moggy.log에 정리가 굉장히 잘되어있습니다. 👍

🛫 Mixin의 등장 배경

기존에 하나의 클래스는 하나의 부모 클래스만
존재하는 불편함에서부터 Mixin은 시작되었습니다.

예를 들어 코끼리와 참새가 있습니다.
코끼리와 참새는 모두 동물 클래스를 상속합니다.

참새는 날수 있지만 코끼리는 날수 없죠?
그래서 동물 클래스에 원래 있던 fly() 메서드를 참새 클래스로 옮겨줍니다.

여기서 만약 코끼리 중에 날 수 있는 코끼리가 있다면 어떻게 될까요?
이렇게 되면 또 날 수 있는 코끼리를 위한 fly() 메서드를 새로 정의하여 넣어주어야 합니다.

이를 해결하기 위해
클래스를 행위 기반으로 정의를 하고(Mixin) 이를 모아
하나의 클래스에 대한 정의를 할 수 있도록 만들어진 설계 방식입니다.
(새로운 기술 x, 코드 설계 방식 o)

🎡 그래서 Mixin이란?

Mixin은 행동을 기반으로 만들어진 클래스 조각입니다.
실제 코드를 보면 이해가 빠를 것 같습니다.

실제 코드

출처-moggy.log

// 나는 행위를 담당하는 Mixin
const FlyToMixin = (superclass) => class extends superclass {
	flyTo(destination){
        console.log(`${this.name} is flying to the ${destination}`);
    }
}

// 먹는 행위를 담당하는 Mixin
const EatMixin = (superclass) => class extends superclass {
	eat(food){
        console.log(`${this.name} is eating ${food}`);
    }
}

// 헤엄치는 행위를 담당하는 Mixin
const SwimAtMixin = (superclass) => class extends superclass {
	swimAt(place){
        console.log(`${this.name} is swiming at the ${place}`)
    }
}

// 믹스인을 탑재한 Elephant
class Elephant extends SwimAtMixin(EatMixin(Animal)) { /*...*/ }

const myElephant = new Elephant('일반 코끼리');
myElephant.swimAt('river');

이제 하늘을 나는 코끼리도 금방 만들 수 있습니다.

class Dumbo extends FlyToMixin(Elephant) { /*...*/ }
// Object.assign 방식으로도 가능
const dumbo = new Dumbo("덤보");

Object.assign() 으로도 구현이 가능!

// 믹스인
let sayHiMixin = {
  sayHi() {
    alert(`Hello ${this.name}`);
  },
  sayBye() {
    alert(`Bye ${this.name}`);
  }
};

// 사용법:
class User {
  constructor(name) {
    this.name = name;
  }
}

// 메서드 복사
Object.assign(User.prototype, sayHiMixin);

// 이제 User가 인사를 할 수 있습니다.
new User("Dude").sayHi(); // Hello Dude!

출처(더 자세히 나와있습니다!)

참고

구현방법에 대한 고민 function vs class vs mixin