Знакомство со стрелочными функциями 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)
});

Теги

ECMAScriptES6 / ECMAScript 6front-endJavaScriptjQueryВеб-разработка / WebDev / Web DevelopmentФронтенд

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

В случае комментирования в качестве гостя (без регистрации на disqus.com) для публикации комментария требуется время на премодерацию.