JavaScript. How to subscribe to an event in the class constructor?

Good day!

JS master recently, had programmed in C#. Can't figure out what I'm doing wrong. Killed a few hours, read about: context, circuit, function switches, bind, call and stuff... but did not understand.

There is a class EventEmitter, "nasledujici" from which to obtain the ability to generate custom events. There is a class Model generating a "change" when you change the data and there is a component (the Component class), which gets a reference to the model.

I want to sign the created component to the event model directly in construtora. But not distorted, are unable to need this value in the event handler. All the time this refers only to the component that was created last (((

The following code is a basic version (around it has put a lot of experimentation):

spoiler
// Base class that allows you to sign at the event.

class EventEmitter {

 constructor() {
 this.handlers = {};
}

 on(eventName, handler) {

 if (eventName in this.handlers) {
this.handlers[eventName].push(handler);
 } else {
 this.handlers[eventName] = [ handler ];
}
};

 emit(eventName, args) {
 if (eventName in this.handlers) {
 for (var handler of this.handlers[eventName]) {
 setTimeout(() => { handler(); }, 0);
}
}
}
}

// Data model triggered a change event when changed.

class Model extends EventEmitter {

 constructor() {
super();
}

 set(entries) {

 const keys = Object.keys(entries);
 keys.forEach(key => {
 this[key] = entries[key];
});
 this.emit('change', keys);
}

}

// Component class. When you create a subscribes to the model changes.

class Component extends EventEmitter {

 constructor(settings, model) {
super();
 this.isActive = false;
 this.model = model;
 this.uses = settings.uses;

 if (settings.children) {
 this.children = {};
 for (let child of Object.entries(settings.children)) {
 var key = child[0], componentSettings = child[1];

 // All child components are created recursively and get a link to the same model as the parent.

 this.children[key] = new Component(componentSettings, this.model); 
}
}

 model.on('change', () => {
 // Here will be more complex logic, but still need to deal with this.
console.log(settings);
console.log(this);
});
}
}

var model = new Model();

var view = new Component({

 template: 'gameLayout',
 children: {

 player: {
 template: 'player',
 slot: '#player',
 uses: [ 'player' ]
},

 menu: {
 template: 'menu',
 slot: '#menu'
},

 question: {
 template: 'question',
 slot: '#question',
 uses: [ 'question' ]
}
}

}, model);

model.set({ property: 'value' });


In General, once again, understand that I understand nothing in JS..

If someone can explain where I'm wrong, or even just to show me how, I would be very grateful.

Sincerely, Sergey.

PS Especially annoying point that when I look in the console model.handlers - it shows that every handler in the closure object has its settings... but appears still the same. In General, rested (
March 19th 20 at 08:58
1 answer
March 19th 20 at 09:00
Thank you all and sorry for the trouble!

The error is found, and it is not in context, but in the wrong circuit!

In the method of EventEmitter.emit in a loop is var, not let - that's the whole problem. Still, with the context I understood correctly, but accuracy need to pull up!

Find more questions by tags ClosureJavaScript