Remove an eventhandler in the handler itself

Question

In short: I would like to bind the result of .bind as an arguement in it's own call

var bound = foo.bind(this,bound);

because I'm not sure how else to solve my problem.

The problem:

I have an item that is dependent on an array of other items. Once one of those items is removed I want to remove the dependent item, and remove all the listeners placed on the dependencies.

I'm struggling to remove the eventhandlers of the other dependencies. I'm trying to use bind, but since the handler function is the one that removes the listeners, I find that I would have to bind the result of the bind() call in it's own call as an argument. This does ofcourse not work.

The bind call bellow binds the unbound version of 'handler' as a parameter, and thus removeEventListener does not work as it is a different copy of the function.

The question is: can I use bind to do this and/or how can I otherwise solve this?

Im using eventemitter3, but it should be the same for any event library.

setHandlers(dependentItem,dependencies)
{
    var handler = this.onDependencyRemoved;
    handler = handler.bind(this,dependentItem,dependencies,handler);//bind itself as third argument
    dependencies.forEach(dependency => {
        dependency.addEventListener("removed",handler);
    });
}
onDependencyRemoved(dependentItem,dependencies,handler)
{
     dependentItem.remove();
     dependencies.forEach(dependency => {
          dependency.removeEventListener("removed",handler);
     });
}

edit:

Complete working example to run in nodejs:

const EventEmitter = require('events');
//const EventEmitter = require('eventemitter3');

class MyEmitter extends EventEmitter {
    remove() {
        console.log("I'm being removed, this should happen only once");
    }
}
var dependent = new MyEmitter();
var dependencies = [new MyEmitter(),new MyEmitter()];

var handler = (e) => removeHandler(dependencies,dependent,handler);

dependencies.forEach(dependency => dependency.once('removed',handler));

var removeHandler = function(dependencies,dependent,handler) {
    //remove the dependent object because one of the dependencies was removed
    dependent.remove();
    //remove the listeners from all of the dependencies
    dependencies.forEach(dependency => {
        console.log('before removing: '+dependency.listeners('removed').length);
        dependency.removeListener('removed',handler);
        console.log('after removing: '+dependency.listeners('removed').length);
    });
}

//should remove the dependent object
dependencies[0].emit("removed");
//should not do anything anymore since the listeners are removed
dependencies[1].emit("removed");

Answer 1

You cannot do this using bind, but you can do this relatively easy by using a closure - either directly for the function to be bound, or in your own helper function similar to bind. It's as simple as

const handler = (e) => this.onDependencyRemoved(dependentItem, dependencies, handler, e);

I'm not sure however why those two functions are methods of anything; they look rather static. It might make sense to make them methods of the dependentItem, in which case the arguments and even the whole handler don't need to be stored in closure variables, but could be made instance properties to be initialised in the constructor.

Answer 2

There are better ways to solve your problem that others have mentioned. However, there is a more fundamental problem with the code:

var bound = foo.bind(this,bound);

The value of bound in your code, at the time of execution, is undefined. This is the equivalent of just calling foo.bind(this) which is probably not what you want.