class - mixin

1. mixin

자바스크립트는 단일상속만을 허용합니다.

객체에는 단 하나의 [[ Prototype ]] 만 존재할 수 있고,

클래스는 단 하나의 클래스만 상속 받을 수 있습니다.

 

이런 제약에서 벗어나기 위해 mixin 을 사용할 수 있습니다.

mixin이란 특정 행동을 실행해주는 메서드를 제공하는 객체입니다.

이 객체를 다른 클래스에 병합해 사용합니다.

let helloMixin = {
  sayHello(){
    console.log(`Hello ${this.name}`)
  }
}

class User {
  constructor(name){
    this.name = name;
  }
}

Object.assign(User.prototype, helloMixin);

new User('Bob').sayHello(); // 'Hello Bob'

상속 없이 메서드를 복사하여 인스턴스에서 메소드를 사용할 수 있습니다.

---

믹스인에서 믹스인을 상속받아 사용할 수 있습니다.

let say ={
  say(msg){
    console.log(msg)
  }
}

let sayHelloMixin = {
  __proto__: say,

  sayHello(){
    super.say(`hello ${this.name}`)
  }
}

class User {
  constructor(name){
    this.name = name;
  }
}

Object.assign(User.prototype, sayHelloMixin);

new User('Bob').sayHello(); // 'Hello Bob'

 

sayHelloMixin은 say객체를 상속 받았습니다.

이때, 생성된 인스턴스에서 호출한 sayHello()을 주목해 봅시다.

 

sayHelloMixin에서 부모메서드 super.say를 호출하면, 

클래스의 프로토타입이 아닌 sayHelloMixin의 프로토타입에서 메서드를 찾게되는데,

위와 같은 동작은

[[ HomeObject ]] 라는 함수 전용 특수 내부 프로퍼티와

super() 의 동작방식 때문에 발생합니다.

 

클래스이거나 객체 메서드인 함수의 [[ HomeObject ]] 라는 프로퍼티에는 해당 객체가 저장됩니다.

super는 [[ HomeObject ]] 를 통해 부모 프로토타입과 메서드를 찾습니다.

위 그림처럼

User.prototype 의 프로퍼티인 sayHello와 같은 메서드에서 사용된 super는

[[ HomeObject ]] 를 통해 메소드의 생성 근원지인 sayHelloMixin 객체를 알 수 있고,

이를 통해 부모 프로토타입과 해당 메서드를 찾습니다. 

 

 

---

요약

1. mixin은 다른 클래스들의 메서드 조합을 포함하는 클래스를 의미합니다.

2. 자바스크립트에서는 다중 상속을 지원하지 않으므로

    믹스인을 사용하여 메서드 복사를 통해 프로토타입에 구현할 수 있습니다.

3. mixin이 기존 클래스 메서드를 덮어쓸 수 있으므로 충돌이 발생하지 않도록 이름을 신중하게 정해야 합니다.

 

 

어렵구나