Javascript mixins

자바스크립트에서는 다중상속이 되지 않습니다. 

단일 상속만을 허용하는 언어입니다.

 

아래의 예시처럼 상속을 이용할 수 있습니다.

class People {
  constructor(age, name) {
    this.age = age;
    this.name = name;
  }
}

class Programmer extends People {
  constructor(age, name, job) {
    super(age, name);
    this.job = job;
  }
}

const test = new Programmer(10, 'test', 'programmer')
console.log(test);

console 의 내용

 

 python 처럼 다중상속을 할 수는 없습니다.

아래와 같은 에러가 발생하게 됩니다.

 

다중상속의 대안으로 믹스인을 사용할 수 있습니다.

이 믹스인에 대해 알아보겠습니다.

 

믹스인은 객체지향 언어에서 쓰이는 용어입니다. 다른 클래스들의 메서드 조합을 포함하는 클래스를 의미합니다.

속성들 (name, age, job) 말고 메소드들만 다중상속 처럼 사용할 수 있을것 같습니다.

 

간단한 믹스인 예시와 좀 더 디벨롭한 믹스인 예시를 살펴보겠습니다.

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

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

Object.assign(User.prototype, sayHiMixin);

new User('test').sayHi() // Hello test

믹스인 객체를 선언하고 이를 class의 prototype에 추가해주어서 새로운 인스턴스에서 사용하는 모습을 볼 수 있습니다.

 

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

// 믹스인
let sayHiMixin = {
    __proto__: say,
	sayHi() {
		super.say(`Hello ${this.name}`)
    },
    sayBye() {
		super.say(`Bye ${this.name}`)
    }
}	

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

Object.assign(User.prototype, sayHiMixin);

new User('test').sayHi()

 

객체의 Prototype에 접근할 수 있는 __proto__ 속성을 이용해 직접 믹스인을 등록해주는 것을 볼 수 있습니다.

프로토타입 체이닝에 의해 super.say를 호출하게 되면 상위 프로토타입의 메소드를 호출하게 됩니다.

 

 

다른 언어의 다중상속 개념을 자바스크립트에서는 믹스인을 이용해 프로토타입에 속성을 부여해줌으로써 흉내낼 수 있습니다.

 

 

 

https://ko.javascript.info/mixins

믹스인