Learning JavaScript 상속, 믹스인

상속

프로토타입을 이해하면서 우리는 이미 상속의 일면을 봤습니다. 클래스의 인스턴스는 클래스의 기능을 모두 상속합니다. 상속은 한 단계로 끝나지 않습니다. 객체의 프로토타입에서 메서드를 찾지 못하면 자바스크립트는 프로토타입의 프로토타입을 검색합니다. 프로토타입 체인은 이런식으로 만들어 집니다.

 

클래스의 계층 구조를 만들 때 프로토타입 체인을 염두에 두면 효율적인 구조를 만들 수 있습니다. 즉 프로토타입 체인에서 가장 적절한 위치에 메서드를 정의하는 겁니다. 예를 들어 자동차에는 deployAirbags란 메서드가 있을 수 있습니다. 이 메서드를 운송 수단 클래스에 정의 할 수도 있겠지만, 에어백이 달린 보트는 없으므로 자동차에 정의하는게 맞고 보트나 차는 승객을 태울 수 있으므로 addPassenger 메서드를 만들면 적당합니다.

class Vehicle{
  constructor(){
    this.passengers = [];
    console.log("Vehicle created");
    }
  addPassenger(p){
    this.passengers.push(p)
    }
}

class Car extends Vehicle {
  constructor(){
    super();
    console.log("Car created");
    }
    deployAirbags(){
    console.log("BWOOSH");
    }
}

super()는 슈퍼클래스의 생성자를 호출하는 특별한 함수 입니다. 서브클래스에서는 이 함수를 반드시 호출해야합니다. 그렇지 않으면 에러가 발생!!

const v = new Vehicle();
v.addPassenger("Fank");
v.addPassenger("Judy");
v.passengers;

const c = new Car();
c.addPassenger("Alice");
c.addPassenger("Cameron");
c.passengers;

v.deployAirbags(); //error
c.deployAirbags(); //"BWOOSH"

객체 프로퍼티 나열 다시 보기

for...in문으로 객체의 프로퍼티를 나열하는 방법을 이미 봤습니다. 이제 hasOwnProperty가 어떤 의미가 있는지 완전히 이해할 수 있습니다. 객체 obj와 프로퍼티 x에서, obj.hasOwnProperty(x)는 obj에 프로퍼티 x가 있다면 true를 반환하며, 프로퍼티 x가 obj에 정의되지 않았거나 프로토타입 체인에만 정의되었다면 false를 반환합니다.

 

ES6클래스를 설계 의도대로 사용한다면 데이터 프로퍼티는 항상 인스턴스에 정의해야하지 프로토타입 체인에 해선 안됩니다. 하지만 프로퍼티를 프로토타입에 정의하지 못하도록 강제하는 장치는 없으므로 확실하려면 항상 hasOwnProperty를 사용하는 편이 좋습니다. 아니면 Object.keys를 사용하면 프로토타입 체인에 정의된 프로퍼티를 나열하는 문제를 피할 수 있습니다.

믹스인

 대부분의 객체지향언어는 단일 상속을 추구합니다. 다중상속으로 충돌이 일어나고자 하는 경우를 막기 위함이죠 그리고 인터페이스를 만들어서 다중상속처럼 사용 가능하게 만들었습니다. 하지만 자바스크립트에서는 이 둘의 중간을 사용하는 믹스인이라는 개념이 있습니다. 그러면 자동차에 보험 가입이라는 믹스인을 만들어 봅시다.

 

이 믹스인은 단순하게 만들겁니다. 보험 가입 믹스인 외에도 InsurancePolicy 클래스를 만듭니다. 보험 가입 믹스인에는 addInsurancePolicy, getInsurancePolicy 메서드가 필요하며, 편의를 위해 isInsured 메서드도 추가하겠습니다.

class InsurancePolicy() {
  function makeInsurable(o){
    o.addInsurancePolicy = function(p) { this.insurancePolicy = p;}
    o.getInsurancePolicy = function() { return this.insurancePolicy; }
    o.isInsured = function() { return !!this.insurancePolicy; }
}

이제 어떤 객체든 보험에 가입할 수 있습니다.

makeInsurable(Car.property);
const car1 = new Car();
car1.addInsurancePolicy(new InsurancePolicy());