[javascript] 자바스크립트에서의 다중 상속 구현 방법

15 Dec 2023

javascript

다중 상속은 객체지향 프로그래밍에서 한 클래스가 여러 부모 클래스로부터 특성과 동작을 상속받는 것을 말합니다. 하지만 자바스크립트에서는 본질적으로 다중 상속을 지원하지 않습니다. 하지만 몇 가지 패턴을 사용하여 비슷한 효과를 얻을 수 있습니다.

1. 믹스인 (Mixin) 활용

믹스인은 여러 객체의 기능을 조합하여 새로운 객체를 생성하는 패턴입니다. 이를 활용하여 다중 상속과 유사한 효과를 얻을 수 있습니다.

아래는 믹스인을 이용한 예제 코드입니다.

// 믹스인 객체 정의
const canEat = {
  eat() {
    console.log('Eating');
  }
};

const canSleep = {
  sleep() {
    console.log('Sleeping');
  }
};

// 다중 상속 효과 얻기
class Animal {
  //...
}

class Dog extends Animal {
  //...
}

Object.assign(Dog.prototype, canEat, canSleep); // 믹스인을 통한 다중 상속

2. Proxy를 활용한 다중 상속

ES6 Proxy는 객체에 대한 작업을 가로채거나 수정할 수 있는 기능을 제공합니다. 이를 이용하여 다중 상속과 비슷한 효과를 얻을 수 있습니다.

아래는 Proxy를 활용한 다중 상속의 예제 코드입니다.

// 다중 상속 효과 얻기
function multipleInheritance(obj, ...mixins) {
  let newObj = Object.assign({}, obj);
  for (let mixin of mixins) {
    newObj = new Proxy(newObj, mixin);
  }
  return newObj;
}

const animal = {
  move() {
    console.log('Moving');
  }
};

const canEat = {
  eat() {
    console.log('Eating');
  }
};

const canSleep = {
  sleep() {
    console.log('Sleeping');
  }
};

const dog = multipleInheritance(animal, canEat, canSleep); // Proxy를 통한 다중 상속

위의 예제들은 자바스크립트에서 다중 상속과 비슷한 효과를 얻는 방법에 대한 간략한 소개입니다. 각 방법마다 장단점이 있으므로 상황에 맞게 적절한 방법을 선택하는 것이 중요합니다.

더 많은 정보는 MDN web docs에서 확인할 수 있습니다.