JavaScript箭头函数理解

Question

我有这个功能：

$(".tabstrip li").each(function () {
        $(this).attr("id") == "searchlist" ? $(this).addClass("selected") : $(this).removeClass("selected");
    })

现在我在问自己，我是否可以缩短它。所以我尝试了这个：

$(".tabstrip li").each(() => $(this).attr("id") == "searchlist" ? $(this).addClass("selected") : $(this).removeClass("selected"))

而且它不起作用。我怎么理解箭头函数这应该是正确的。

（也没有报错）

有人明白吗？它并不重要，但我无法入睡，直到我弄清楚为什么这不起作用;)

感谢您的宝贵时间^^

Answer 1

你可以像这样缩短。我不认为使用 ES6 Arrow Functions 是浏览器支持的最佳选择。

$(".tabstrip li").each(function () {
    $(this).toggleClass("selected", this.id == "searchlist");
})

Answer 2

箭头函数在它们内部设置 this 的值，因此它与它们外部的 this 的值相同。

这会破坏您的代码，因为 each 调用的常规函数将根据循环的当前值具有 this 的值（并且您的函数取决于这种情况） .

不要使用箭头函数"to make code shorter"。那不是他们的目的。箭头函数用于控制 this.

的值

JavaScript箭头函数理解

JavaScript Arrow functions understanding

javascript

jquery

function

arrow-functions