Yifans_Z's Blog.

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

字数统计: 171阅读时长: 1 min
2019/04/10 Share

在老项目中开始改用 laravel-mix ES6 逐渐过渡。摸索中遇到在与 jQuery 一同使用时 箭头函数$(this) 的含义发生了变化。

遇到这个问题主要是没有搞清楚 箭头函数

$('.js-bottom-btn').click(() => {
let flag = $(this).date('flag');
...
});

转换为了:

$('.js-bottom-btn').click(function() {
let flag = $(_this).date('flag');
...
});

_this is undefined

根据 jQuery click 文档 可以修改为:

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

类似的问题:

$('jquery-selector').each(() => {
$(this).click();
})

需要改为:

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

Reference: