자바스크립트에서의 다중 상속

최근에 면접을 봤는데 프로토타입, 자바스크립트의 다중 상속에 관해서 질문을 하시더라구요... 프로토타입은 익숙한 개념이었지만 다중 상속은 무지했습니다.. 그래서 글을 정리합니다

자바스크립트는 프로토타입 기반의 객체 지향 언어로, 다른 객체지향 언어들처럼 명시적인 class 기반 다중 상속을 직접 지원하지는 않습니다. 하지만, 자바스크립트는 몇 가지 다른 방법으로 다중 상속을 시뮬레이션할 수 있습니다. 이번 글에서는 자바스크립트에서 다중 상속을 구현하는 일반적인 방법들에 대해 알아보겠습니다.

1. 믹스인(Mixin) 패턴

믹스인은 하나의 함수나 객체에서 다른 객체의 메서드나 속성을 "혼합"하여 사용하는 패턴입니다. 이는 자바스크립트에서 다중 상속을 구현하는 가장 일반적인 방법 중 하나입니다.

function mixin(target, ...sources) {
  Object.assign(target, ...sources);
}

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

const canWalk = {
  walk() {
    console.log('Walking');
  }
};

const canSwim = {
  swim() {
    console.log('Swimming');
  }
};

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

mixin(Person.prototype, canEat, canWalk, canSwim);

const person = new Person('John');
person.eat(); // Eating
person.walk(); // Walking
person.swim(); // Swimming

이 방법을 통해 Person 객체는 canEat, canWalk, canSwim의 기능을 모두 상속받아 사용할 수 있습니다.

2. 프로토타입 체인을 통한 복합 상속

다른 방법으로는 프로토타입 체인을 사용하여 기능을 상속받을 수도 있습니다. 이 방법은 믹스인과 유사하지만, 객체의 프로토타입 체인을 직접 조작하여 상속을 설정합니다.

function inherit(target, ...sources) {
  sources.forEach(source => {
    Object.getOwnPropertyNames(source).forEach(name => {
      target[name] = source[name];
    });
  });
  return target;
}

class Animal {
  breathe() {
    console.log('Breathing');
  }
}

const swimmer = {
  swim() {
    console.log('Swimming');
  }
};

class Fish {
  constructor() {
    inherit(this, new Animal());
  }
}

inherit(Fish.prototype, swimmer);

const fish = new Fish();
fish.breathe(); // Breathing
fish.swim(); // Swimming

3. 결론

자바스크립트에서는 다른 객체지향 언어처럼 다중 상속을 직접적으로 지원하지 않지만, 믹스인이나 프로토타입 조작과 같은 방법을 통해 다중 상속을 간접적으로 구현할 수 있습니다. 이러한 패턴들을 활용하면 재사용 가능한 코드를 작성하고 객체 간에 기능을 공유하는 것이 가능해집니다. 다만, 구체적인 구현 방식을 선택할 때에는 코드의 가독성과 유지보수성을 고려해야 합니다.