javaScript - multiple inheritance in ES6,

Question

I'm trying to inherit class "EventEmitter" and a pre defined class "Person", here is the code

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age; 
    }
    introduces() {
        return `My name is ${this.name}. I am ${this.age} years old.`;
    }
}; 

\\here comes the mixin part

function mix(...mixins) {
    class Mix {}
    for (let mixin of mixins) {
        copyProperties(Mix, mixin);
        copyProperties(Mix.prototype, mixin.prototype);
    }
    return Mix;
}

function copyProperties(target, source) {
    for (let key of Reflect.ownKeys(source)) {  
        if (key !== "constructor" &&  key !== "prototype" && key !== "name") {
            let desc = Object.getOwnPropertyDescriptor(source, key);
            Object.defineProperty(target, key, desc);
        }
    }
}

I intend to create a new class 'PersonWithEmitter', and still call the constructor like below:

class PersonWithEmitter extends mix(Person,EventEmitter){
    constructor(name,age){
        super(name,age)
        \\do something else
    }

Here comes the issue, when I create a new instance of 'PersonWithEmitter' like this let someOne = new PersonWithEmitter("Tom",21), will not get what I what, In the new class, I want to use this.name and this.age, which is still undefined. So how can I change my code, So the new class can both have its parent's methods and only class "Person"'s constructor? Pardon me for my broken English.

Why not used an existing implementation like npmjs.com/package/event-emitter-mixin — loganfsmyth
– loganfsmyth, Commented Aug 17, 2017 at 16:12
@loganfsmyth I think this question is more about why it doesnt work than how to implement this. Clearly, implementing something like this isn't the issue, it's how the mixin works in JS thats at quesion here... — somethinghere
– somethinghere, Commented Aug 17, 2017 at 16:13
@somethinghere since this is my first time use mixin and EventEmitter,I just cannot figure out the right way to implement this. — Yu Duan
– Yu Duan, Commented Aug 17, 2017 at 16:16

Estus Flask · Accepted Answer · 2017-08-17 19:02:55Z

3

In many cases multiple inheritance in JavaScript indicates wrong design decision. It may result in hacky objects that don't behave as they should. The way it is done should always be determined by particular objects. In some cases a shallow copy of own properties is needed, in another the entire prototype chain should be traversed. Composition over inheritance is often a better choice.

The problem in the code above is that class constructors are not called. Mix has empty constructor. This is the reason why PersonWithEmitter doesn't work as expected.

Multiple constructor function calls can generally be stacked like:

function Foo(...args) {
  let _this = this;
  _this = Bar.apply(_this, args);
  _this = Baz.apply(_this, args);
  return _this;
}

This won't work if Bar or Baz is ES6 class because it contains a mechanism that prevents it from being called without new. In this case they should be instantiated:

function Foo(...args) {
  copyProperties(this, new Bar(...args));
  copyProperties(this, new Baz(...args));
}

Static and prototype properties may also be copied to Foo like is shown in code above.

If the case is narrowed down to Node.js EventEmitter, it can be handled like a special case. Its implementation is certain and stable. It is already known that EventEmitter does initialization in constructor, it has a shallow prototype chain and property descriptors. So it likely should be:

class Foo extends Bar {
  constructor(...args) {
    super(...args)
    EventEmitter.call(this);
    // or
    // EventEmitter.init.call(this);
}
copyProperties(Foo.prototype, EventEmitter.prototype);

answered Aug 17, 2017 at 19:02

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Yu Duan Over a year ago

Thank you, problem solved. The way I see it now, I can do it in two way, First, I can just let class Person inherit EventEmitter, and it did works. Second, I can call EventEmitter in the constructor as you write above.

Estus Flask Over a year ago

You're welcome. Yes, in the case with EventEmitter both options are valid.

Collectives™ on Stack Overflow

javaScript - multiple inheritance in ES6,

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related