为什么 JSHint 会警告我在回调函数中使用“this”？答案

【问题标题】：Why does JSHint warn me about using 'this' in a callback function?为什么 JSHint 会警告我在回调函数中使用“this”？
【发布时间】：2014-02-16 21:49:38
【问题描述】：

我使用的 IDE (Cloud 9) 结合了 JSHint，当它检测到错误时会向我发出警告。作为一项原则，我会尝试纠正我的代码以纠正这些错误。我现在有一个我无法解决的问题：

$("#component-manager tr:not(.edit-component) td").on("click", function() {
    if ($(this).index() !== 0) {
        var checkbox = $(this).parent().find("input[name=component-selected]");
        checkbox.trigger("click");
    }
});

这段代码给了我一个警告：“在回调函数中使用'this'”。

我有两个问题：

我应该如何改进我的代码并消除此警告。
为什么最好不要在回调函数中使用this（因为这是 JSHint 试图提倡的）？

【问题讨论】：

我认为这是 IDE 中的错误或配置错误。明确而热情地鼓励在 jQuery 回调中使用 this。
JShint 没有给我任何警告或错误。
你可以用function(e){ $(e.target) ...代替function(){ $(this) ...
唯一可以改进代码的方法是缓存 jQuery 对象：var $this = $(this);。它不会消除错误，但它被认为是一种很好的做法，特别是如果您一次又一次地重复进行相同的选择。可能不是您在这里需要的东西，而是未来代码需要考虑的东西。

标签： javascript jquery jshint

【解决方案1】：

您的代码没有任何问题，也没有任何“更好”的编码方式。这只是jsHint做的事情，可能只是因为有些人在其他类型的回调中使用this会出错。

您可以在代码中插入一条注释，告诉 jsHint 忽略此特定用途。我会去看看是否可以找到它，如果找到它，请将其添加到我的答案中。您可以使用 jsHint 的 validthis 选项：http://www.jshint.com/docs/options/#validthis 忽略特定函数的此警告。

我自己没有尝试过，但是根据文档，你可以在函数中添加这个：

/* jshint validthis: true */

或者，可以将配置文件与 jshint 一起使用，更改此选项的默认值（您必须弄清楚如何在 IDE 中执行此操作）。

【讨论】：

【解决方案2】：

该代码没有任何问题，只是您的 IDE 并不聪明。在我的 IDE 中，函数总是返回一些东西，但由于我使用条件 if 和 else，它给了我一个警告，可能什么都不会返回并添加“void”（使用 XCode）。做我该做的，忽略它。

如果它非常困扰您，并且仅在您使用 this 时才会发生这种情况，您可以按照 lordvlad 所说的使用 function(e){ 并将 $(this) 替换为 e.target。

【讨论】：

我现在正在按照您的建议进行操作。它并没有让我感到困扰，但正如@OregonTrail 所建议的那样，我认为这是一种更好的处理方式。
@jfriend00 我想这是一种效率较低的机制：我可以忍受错误！（改变答案...）

【解决方案3】：

这来自通常错误实现的this that 模式。示例见this question。

通常有更好的方法来获取对相关对象的引用。在这种情况下，您需要为回调函数声明一个参数并显式引用事件目标。

$("#component-manager tr:not(.edit-component) td").on("click", function(event) {
    if ($(event.target).index() !== 0) {
        var checkbox = $(event.target).parent().find("input[name=component-selected]");
        checkbox.trigger("click");
    }
});

【讨论】：