jquery - 使用 ES6 调整 jQuery 点击处理程序

Question

在过去的 5 年里，我一直以同样的方式用 jQuery 编写我的点击处理程序。

$('.some-link').on('click', function(event) {
    event.preventDefault();
    $(this).addClass('active');
});

我喜欢新的 ES6 箭头语法，但我不知道如何让 jQuery 也能同样工作。例如，下面的代码与上面的代码不同:

$('.some-link').on('click', (event) => {
    event.preventDefault();
    $(this).addClass('active');
});

有人用他们的 jQuery 事件处理程序进行了切换吗？

Answer 1

箭头函数不仅仅是常规函数的语法糖。有一个区别 - 它们没有像常规函数那样拥有自己的上下文，因此不能像这样使用它们。

在底层，jquery 将处理程序函数与 event.target 绑定(bind)(意味着处理程序内的 this 将是 event.target)。但是，当您使用箭头函数时，不会创建函数上下文 - MDN 上对此有更多描述:https://developer.mozilla.org/cs/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_binding_of_this

你可以这样做:

$('.some-link').on('click', event => {
    $(event.target).addClass('active');
    return false; // this is same as calling `event.preventDefault();` in jquery
});