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

Добавлено 6 ноября 2015 в 13:15
arrow functions

Стрелочные функции – действительно удобное нововведение в спецификации 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)
});

На сайте работает сервис комментирования DISQUS, который позволяет вам оставлять комментарии на множестве сайтов, имея лишь один аккаунт на Disqus.com.


Сообщить об ошибке