javascript - 使用 "this"将函数作为参数传递的更好方法

Question

我有一个非常简单的问题，即当将函数作为使用 this 的参数传递时，该怎么做(或者至少是正确的)。

更好的解释方式是举个例子:

假设我想淡出 一个对象，然后将其从 DOM 中移除。所以我会这样做:

$("ul li.active").fadeOut(function() {
    $(this).remove();
});

或者我应该这样做吗？它是否正确？ (它有效，但可能是一种不好的做法)

$("ul li.active").fadeOut($(this).remove);

我在任何问题上都没有找到与此相关的内容，所以我想知道。

Answer 1

您的第二个示例不 起作用(元素淡出，但未被删除——回调不知道要删除哪个元素，因此不删除任何元素)。它失败了，因为 remove 函数期望通过引用 jQuery 实例的 this 调用，当您以这种方式设置回调时，它会通过 this 调用 而是引用 DOM 元素。

在大多数 jQuery 回调的特定情况下，您的第一种形式是执行此操作的标准方式:

$("ul li.active").fadeOut(function() {
    $(this).remove();
});

这是标准的原因是 jQuery 将 this 的值设置为与事件相关的特定 DOM 元素。 (对于一些回调，它不是 DOM 元素，但这是通常的事情。)

当然，如果您经常需要这样做，您可能有一个可以重用的命名函数:

function removeCallback() {
    $(this).remove();
}

$("ul li.active").fadeOut(removeCallback);
// ...elsewhere...
$("some other selector").fadeOut(removeCallback);

---

在一般情况下，与 jQuery 无关，如果您需要在特定对象上设置方法回调(因此，您想要控制this 是什么)，您可以使用 ES5 的 Function#bind 来避免创建不必要的闭包。

doSomethingAndCallMeBack(this.method.bind(this));

在那里，我们使用 this.method.bind(this) 创建一个函数，当调用时，将调用 this.method 确保 方法中的 this 与我们的代码中的含义相同。如果我们这样做:

doSomethingAndCallMeBack(this.method); // <== Can be wrong

...我们依靠 doSomethingAndCallMeBack 来知道要使用什么 this 值(上面没有传递给它告诉它什么，它必须 已经知道了)。

但由于 jQuery 通常将 this 设置为一个有用的值，因此在 jQuery 代码中这不太常见。

我的博客上有更多相关信息(呃，没有双关语):

• Mythical methods
• You must remember this