在结束语中使用“this”答案

【问题标题】：Use of 'this' in closure在结束语中使用“this”
【发布时间】：2013-12-12 06:34:03
【问题描述】：

我只是好奇...我应该如何在 jQuery 函数中使用“this”？

例如，如果我有一些这样的代码......

    headEl.find("form.blog-search input").focus(function() {
        $(this).next("span").animate({opacity:1}, 200);
    })

它工作正常，但是在 linting 时我收到“Use of 'this' inclosure”的警告。

这是我应该忽略的事情，还是我可以做些什么来不仅解决警告，而且改进我的代码？

更新：

根据 Kevin B 下面的评论，我将代码更改为

    headEl.find("form.blog-search input").on('focus', function(event) {
        $(event.target).next("span").animate({opacity:1}, 200);
    })

哪个按预期工作......现在我只是好奇，这种方法有什么缺点，什么时候应该使用它来支持this，反之亦然？

【问题讨论】：

不，我觉得很好！
你试过.on('focus', function() { ...吗（但那仍然会在闭包中使用this？）
我猜你可以接受 event 参数并使用event.target，但这可能还有其他问题，因为它并不总是与this 相同（尽管在这种情况下是这样）。我会忽略警告。
Cloud9 中的code that generates the warning 似乎天真地检查函数内函数中是否存在“this”。
一个小提示 - 用event.target 代替this 在大多数情况下都可以，但不是全部。当一个事件被委托时，event.target 和 this 在事件处理程序中将引用不同的 DOM 元素。

【解决方案1】：

在这个特定的闭包中使用this 没有问题。

警告可能是因为有时人们期望this 的值与闭包之外的值相同，但通常情况并非如此。

在您的特定情况下，您正确使用它，因为事件系统将 this 设置为触发事件的对象。

例如，人们经常进行 ajax 调用，并期望成功处理程序中 this 的值与进行 ajax 调用时的值相同，但通常情况并非如此。

【讨论】：

【解决方案2】：

我会说个人忽略 jslint。如果您真的想摆脱警告，您可以这样做：

headEl.find("form.blog-search input").focus(function(e) {
    $(e.currentTarget).next("span").animate({opacity:1}, 200);
})

传递给focus 的函数被传递给事件对象。

【讨论】：