이 예제에서는 팩토리 함수를 사용하는 것과 같은 방법으로 es6 클래스와 함께 composition을 어떻게 사용합니까?

Question

(중복 질문이 아니므로 아래 @Jeff M의 답변을 참조하십시오)

es6 클래스 구문을 이해하려고합니다.

예 1 :

이

const barker = (state) => ({ 
    bark:() => console.log("Woof, I am " + state.name) 
}); 

const driver = (state) => ({ 
    drive:() => state.position = state.position + state.speed 
}); 

const murderRobotDog = (name) => { 
    let state = { 
    name, 
    speed: 100, 
    position: 0 
    }; 
    return Object.assign({}, 
    barker(state), 
    driver(state) 
); 
}; 

const bruno = murderRobotDog("bruno"); 
bruno.bark(); // "Woof, I am Bruno" 

완전히 다른 튜토리얼에서 '클래스'를 사용하여 클래스 구성의 내 작업 예는 다음과 같다을 나는 공장 기능을 사용하여 않는이 코드와 같은 방법으로 내 수업을 구성 할 :

예 2 :

class Employee { 
    constructor(firstName, familyName) { 
    this._firstName = firstName; 
    this._familyName = familyName; 
    } 

    getFullName() { 
    return `${this._firstName} ${this._familyName}`; 
    } 
} 

class Group { 
    constructor(manager /* : Employee */) { 
    this._manager = manager; 
    this._managedEmployees = []; 
    } 

    addEmployee(employee) { 
    this._managedEmployees.push(employee); 
    } 
} 

구성의 개념이 어떻게 작동하는지 내가 볼 수 있지만, 이들은 그 일을 매우 다른 방법처럼 보인다. 팩토리를 사용하는 첫 번째 예제는 가장 직관적 인 것처럼 보입니다.하지만 저는 es6 클래스 구문을 사용하고 싶습니다. (이유를 걱정하지 마십시오.

어쩌면 제가 누락되었습니다. 대답은 분명하지만, 어떻게해야할까요? 가장 단순한 방법으로 es6 클래스를 사용하여 예제 1에서 수행됩니까? 감사.

Answer 1

MPJ의 "composition"예제를 사용하고 있습니다. 가장 먼저 알아야 할 것은 MPJ got composition completely wrong입니다. MPJ 이 실제로 실현 한은 다중 상속이었다. 그래서 누군가 다른 질문을 이미 여러 개의 상속 문제로 복제 한 것으로 나타났습니다.

JavaScript의 프로토 타입 체인은 단일 상속 만 지원하며 ES6 클래스는 프로토 타입 체인을 사용하므로 단일 상속 만 지원합니다. 그러나 a little trick을 사용하면 다중 상속과 동일한 효과를 얻을 수 있습니다.

이 같이 갈 것 :

const barker = Sup => class extends Sup { 
    bark() { console.log("Woof, I am " + this.name) } 
} 

const driver = Sup => class extends Sup { 
    drive() { this.position = this.position + this.speed } 
}; 

class murderRobotDog extends driver(barker(Object)) { 
    constructor(name) { 
     super(); 
     this.name = name; 
     this.speed = 100; 
     this.position = 0; 
    } 
}; 

const bruno = new murderRobotDog("bruno"); 
bruno.bark(); // "Woof, I am Bruno" 

[ES6 클래스 다중 상속]의