자바스크립트는 다중 상속(multiple inheritance)을 지원하지 않습니다. 하지만 실제 개발에서는 두 개 이상의 클래스가 가진 기능을 하나의 객체에 합쳐야 하는 경우가 종종 발생합니다. 이럴 때 유용하게 쓸 수 있는 것이 바로 믹스인(Mixin)입니다.
믹스인은 상속 계층 구조에 얽매이지 않고, 한 객체의 메서드와 속성을 다른 객체에 그대로 복사하여 기능을 확장하는 방법입니다.
믹스인이란?
믹스인은 '섞다'라는 뜻의 단어에서 유래했으며, 여러 객체의 기능을 하나의 클래스나 객체에 섞어 넣는 프로그래밍 기법을 의미합니다. 자바스크립트에서는 주로 Object.assign() 메서드를 사용해 프로토타입에 믹스인의 속성을 복사하는 방식으로 구현합니다.
믹스인 예제
예를 들어 Person 클래스가 있다고 가정해 보겠습니다. 사람 객체가 인사말을 할 수 있도록 만들고 싶다면, sayHiMixin이라는 믹스인을 정의한 뒤 이를 활용하면 됩니다.
let sayHiMixin = {
sayHi() {
console.log(`Hello ${this.name}`);
},
sayBye() {
console.log(`Bye ${this.name}`);
}
};
class Person {
constructor(name) {
this.name = name;
}
}
// 믹스인의 메서드를 Person.prototype에 복사
Object.assign(Person.prototype, sayHiMixin);
new Person("John").sayHi();실행 결과
Hello John
동작 원리 살펴보기
위 예제에는 상속이 전혀 사용되지 않았습니다. Object.assign(Person.prototype, sayHiMixin)은 단순히 sayHiMixin 객체의 모든 열거 가능한 속성을 Person.prototype으로 복사할 뿐입니다. 그 결과, Person의 모든 인스턴스는 sayHi()와 sayBye() 메서드를 자신의 것처럼 호출할 수 있게 됩니다.
믹스인의 장점
- 유연성: 상속 관계와 무관하게 원하는 기능만 골라 조합할 수 있습니다.
- 재사용성: 하나의 믹스인을 여러 클래스에 적용해 중복 코드를 줄일 수 있습니다.
- 호환성: 믹스인을 적용한 클래스도 여전히 다른 클래스를 상속받을 수 있습니다.
즉, Person 클래스는 이 믹스인을 사용하면서 동시에 extends 키워드로 다른 부모 클래스를 상속받을 수도 있습니다. 이처럼 믹스인은 자바스크립트에서 다중 상속의 부재를 보완하고, 코드 재사용성을 높이는 강력한 도구입니다.