javascript - 为什么你必须用匿名函数包装回调？

Question

我的 html 包含两个相互重叠的表单，一个用作添加表单，一个用作编辑表单。我使用 jQuery 通过以下代码显示和隐藏它们:

var editForm = $("#edit-form");
var addForm = $("#add-form");

var showEditForm = function() {
    editForm.fadeIn(function() {
        addForm.fadeOut();
    });
};
var showAddForm = function() {
    editForm.fadeOut(function() {
        addForm.fadeIn();
    });
};

我想让代码更紧凑，所以我通过这样做直接在 fadeOut() 回调上设置 fadeOut() 调用:

var showEditForm = function() {
    editForm.fadeIn(addForm.fadeOut);
};
var showAddForm = function() {
    editForm.fadeOut(addForm.fadeIn);
};

但这会产生以下错误 Uncaught TypeError: Failed to execute 'animate on 'Element': Valid arities are: [1], but 4 arguments provided. 但为什么不起作用？

Answer 1

那是因为调用函数作为对象的属性是一种特殊的语法，它以对象作为上下文来调用函数。

当你调用这样的函数时:

obj.func();

那么 this 将是函数内部对 obj 的引用。

如果你得到函数的引用，然后调用它:

var f = obj.func;
f();

那么 this 将是对全局上下文的引用，即 window 对象。

通过使用 editForm.fadeIn(addForm.fadeOut);，您可以获得对 addForm.fadeOut 的引用并发送到 fadeIn 方法。它不再与对象相关联，因此将使用全局上下文而不是对象作为上下文调用它。

您可以使用 proxy 方法将函数与对象相关联，以便在正确的上下文中调用它:

var showEditForm = function() {
  editForm.fadeIn($.proxy(addForm.fadeOut, addForm));
};
var showAddForm = function() {
  editForm.fadeOut($.proxy(addForm.fadeIn, addForm));
};