Знакомство со стрелочными функциями ES6 для jQuery разработчиков

Стрелочные функции – действительно удобное нововведение в спецификации JavaScript ES6.

Наряду с более коротким и лаконичным синтаксисом одним из преимуществ является обработка ключевого слова this немного по-другому. В частности, они не меняют привязку this, когда вы входите в новую функцию, которая была объявлена со стрелкой.

Ниже показана проблема, возникающая при использовании this и событий в jQuery, а так же, как её решить с помощью стрелочных функций ES6.

// Переход от этого кода:
$('.cta').on('click',function() {
    var that = this;
    setTimeout(function() {
        $(that).toggleClass('on');
    }, 1000)
});

// к этому:
$('.cta').on('click',function() {
    setTimeout(()=> {
        $(this).toggleClass('on');
    }, 1000)
});

Теги