frontend-docs/docs/javascript/04-functions/04-arrow-func.md

sidebar_position

sidebar_position
4

Стрелочные функции

Существует ещё один очень простой и лаконичный синтаксис для создания функций, который часто лучше, чем Function Expression.

let sum = (a, b) => a + b;

У стрелочных функций нет «this»

Если происходит обращение к this, его значение берётся снаружи.

❗ Стрелочные функции нельзя использовать с new

Отсутствие this естественным образом ведёт к другому ограничению: стрелочные функции не могут быть использованы как конструкторы. Они не могут быть вызваны с new.

Стрелочные функции VS bind Существует тонкая разница между стрелочной функцией => и обычной функцией, вызванной с .bind(this):

• .bind(this) создаёт «связанную версию» функции.
• Стрелка => ничего не привязывает. У функции просто нет this. При получении значения this – оно, как обычная переменная, берётся из внешнего лексического окружения.

Стрелочные функции не имеют «arguments»

Это отлично подходит для декораторов, когда нам нужно пробросить вызов с текущими this и arguments.

function defer(f, ms) {
    return function() { 
        setTimeout(() => f.apply(this, arguments), ms) 
    }; 
} 

function sayHi(who) {
    alert('Hello, ' + who);
}

let sayHiDeferred = defer(sayHi, 2000); 
sayHiDeferred("John"); // выводит "Hello, John" через 2 секунды`

То же самое без стрелочной функции выглядело бы так:

function defer(f, ms) {
    return function(...args) {
        let ctx = this;
        setTimeout(function() {
            return f.apply(ctx, args);
        }, ms);
    };
}

Особенности стрелочных функций:

• Не имеют this.
• Не имеют arguments.
• Не могут быть вызваны с new.
• У них также нет super.

🚀 Источник: https://learn.javascript.ru/arrow-functions-basics