将 class 方法作为回调传递给 javascript 中的另一个 class

Question

我正在尝试创建一个从另一个 class 调用的弹出菜单（通过 class）。填写这些输入后，我希望输入数据由启动弹出菜单的对象处理。

我的思考过程创建了以下代码（简化的 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”现在不再引用 foo 创建的对象。我打算大量使用 foo class 中的控制器和 bar class 创建的弹出菜单。因此我使用 classes 而不是创建单个对象。

我的问题是是否有一种方法可以在 class 内而不是对象内传递和处理这些值，因为我想多次使用它们。

Answer 1

我将 foo 和 bar 更改为 Form 和 Popup:

1) 快速——也可能是肮脏的——解决方案:

您可以将 this 作为第二个参数发送给 .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) 使用.bind()

更稳健一点，可以使用.bind()方法将Formthis绑定到endMethod再发送出去：

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();

Answer 2

这是一个简单可行的解决方案。您可以将整个“this”表单实例传递给弹出窗口

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();

将 class 方法作为回调传递给 javascript 中的另一个 class

Passing class method as callback to another class in javascript

javascript

html

class

methods

callback