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

Question

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

这是我的 class 定义：

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(); 正常工作，我的刷新函数在表单提交后被调用，但是当它到达我的回调时我得到：

Uncaught TypeError: this.formCallBack is not a function

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

如何更好地传递这个回调函数？

Answer 1

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

你需要这个：

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

或使用绑定到 return 给定上下文的函数：

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

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

How to use Callback functions in Class with JavaScript/jQuery

javascript

jquery

object

callback

anonymous-function