Passing class method as callback to another class in javascript-CodePudding

I am trying to create a pop up menu (via a class) called from another class. After these inputs are filled in I want the input data to be processed by the object from which the pop up menu was initiated.

My thought process created the following code (simplified ofc):

class foo{
    constructor(){
        this.prroperty = 'yes';
    }

    eventMethod(){
        let eventForm = new bar();
        eventForm.fire(this.endMethod);
    }

    endMethod(values){
        // console.log(this);
        console.log(values   this.prroperty);
    }
}

class bar{
    constructor(){
        this.property = 'no';
    }

    fire(callback){
        let value = 'message';
        callback(value);
    }
}

let object = new foo();
object.eventMethod();

this doesn't work obviously because "this" now no longer referes to the foo created object. I'm planning on using the controller from the foo class and the popup menu created by the bar class a lot. Therefore I'm using classes instead of creating single objects.

My question is if there is a way to deliver and process the values while still being able to do so within classes instead of objects because i want to use them multiple times.

CodePudding user response：

I changed the foo and bar to Form and Popup:

1) Quick — and possibly dirty — solution:

You can send this as the second argument to .fire():

class Form {
    constructor() {
        this.property = 'yes';
    }

    eventMethod() {
        let popup = new Popup();
        popup.fire(this.endMethod, this);
    }

    endMethod(values, that) {
        console.log(values   that.property);
    }
}

class Popup {
    constructor() {
        this.property = 'no';
    }

    fire(callback, that) {
        let value = 'message';
        callback(value, that);
    }
}

let form = new Form();
form.eventMethod();

2) Using .bind()

More robustly, you can use the .bind() method to bind the Form this to endMethod before sending it out:

class Form {
    constructor() {
        this.property = 'yes';
    }

    eventMethod() {
        let popup = new Popup();
        popup.fire(this.endMethod.bind(this));
    }

    endMethod(values) {
        console.log(this);
        console.log(values   this.property);
    }
}

class Popup {
    constructor() {
        this.property = 'no';
    }

    fire(callback) {
        let value = 'message';
        callback(value);
    }
}

let form = new Form();
form.eventMethod();

CodePudding user response：

This is a simple possible solution. You can pass to the popup the whole "this" form instance

class Form {
    constructor() {
        this.property = 'yes';
    }

    eventMethod() {
        let popup = new Popup();
        popup.fire(this);
    }

    endMethod(values) {
        console.log(values   this.property);
    }
}

class Popup {
    constructor() {
        this.property = 'no';
    }

    fire(form) {
        let value = 'message';
        form.endMethod(value);
    }
}

let form = new Form();
form.eventMethod();