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