如何通过 JavaScript/jQuery 在 Class 中使用回调函数答案

【问题标题】：How to use Callback functions in Class with JavaScript/jQuery如何通过 JavaScript/jQuery 在 Class 中使用回调函数
【发布时间】：2021-07-07 12:52:56
【问题描述】：

我有一个用于为我的站点创建 CRUD 对象的类。它存储用于添加、列出、编辑和删除数据的表单和表格路径，以及在每次编辑后使用 ajax 重新加载视图。

这是我的类定义：

class CRUDObj{
    constructor(containerSel, links) {
        this.links = links;
        this.containerSel = containerSel;
        this.formCallBack = function(){};
    }

    setActive(obj_id){
        $.post(this.links.editURL+'?'+obj_id, {status:"active"}, this.reload);
    }

    reload(returnData){
        this.formCallBack(returnData);
        this.formCallBack = function(){};

        if($(this.containerSel).length > 0){
            ajaxLoad(this.links.listURL, $(this.containerSel));
        }
    }
}

初始化它的基本实例：

var contactObj = new CRUDObj('#contacts', {
    editURL: '/contact.edit.php',
    listURL: '/contacts.list.php',
});

contactObj.formCallBack = function(){
    console.log('Custom Reload Callback');
};

当我尝试添加回调时出现问题，以便我可以在刷新期间运行自定义函数。运行contactObj.setActive(); 工作正常，我的刷新函数在表单提交后被调用，但是当它击中我的回调时，我得到：

未捕获的类型错误：this.formCallBack 不是函数

手动调用contactObj.refresh(); 运行顺畅。

如何才能更好的传递这个回调函数？

【问题讨论】：

您正在展示一个从未使用过的类。看起来您展示了两个完全独立的代码 sn-ps。
用在第一个sn-p的底部。为了更清楚，我将它们分开
我会删除第二个 sn-p 它与可能混淆人们的问题无关。您已经写了它在其余代码中使用，但实际上根本没有使用它，第二个 sn-p 只是一段随机的不相关的代码。
@jcubic，我感谢您的反馈和您的回答。为了让未来迷失的灵魂更加清晰而进行了编辑

标签： javascript jquery object callback anonymous-function

【解决方案1】：

问题是您将方法作为函数传递，因此您丢失了this 上下文。 this 将是窗口对象或未定义（如果使用严格模式）：

你需要这个：

var self = this;
lightboxForm(this.links.editURL+'?'+obj_id, function(x) { self.reload(x) });

或使用 ES6

lightboxForm(this.links.editURL+'?'+obj_id, x => this.reload(x));

或使用绑定返回给定上下文的函数：

lightboxForm(this.links.editURL+'?'+obj_id, this.reload.bind(this));

【讨论】：