ES6 中使用 jQuery $(this) 的问题

在老项目中，我开始使用 laravel-mix 和 ES6 进行逐渐过渡。在这个过程中，发现了一个问题：当 jQuery 和 箭头函数 一起使用时，$(this) 的含义会发生变化。

问题解释

这个问题主要是因为没有理解箭头函数的特性。箭头函数不会创建自己的 this 上下文，而是继承父作用域的 this。

看下面的例子：

// 问题代码
$('.js-bottom-btn').click(() => {
    let flag = $(this).data('flag');
    // ...
});

在箭头函数中，this 不是指向被点击的元素，而是指向父作用域的 this（可能是 window 或 undefined）。

根据 jQuery click 文档，可以使用以下方法解决：

$('.js-bottom-btn').click(function() {
    let flag = $(this).data('flag');
    // ...
});

$('.js-bottom-btn').click(event => {
    let flag = $(event.currentTarget).data('flag');
    // ...
});

jQuery 的 .each() 方法中也会遇到类似问题：

// 问题代码
$("jquery-selector").each(() => {
  $(this).click();
});

需要修改为：

$("jquery-selector").each((index, element) => {
  $(element).click();
});

箭头函数的一个主要特点是词法绑定（lexical binding）。这意味着：

– EOF –