如何在JavaScript/jQuery中使用Class中的回调函数

Question

我有一个类用于为我的站点创建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();可以顺利工作。

如何更好地传递此回调函数

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