Перейти к содержимому
JS/TS Interview Tutorial

Arrow Functions

В одной фразе: стрелочные функции — не просто краткий синтаксис, они принципиально отличаются от обычных: нет своего this, нет arguments, нет prototype, нельзя вызывать через new. На собесе ждут перечисление всех 4 отличий и объяснение лексического this.

// 1. Лексический this: захватывается из места определения, не вызова
class Timer {
    ticks = 0;
    start() {
        // Arrow: this = экземпляр Timer (из start()), не изменится
        setInterval(() => this.ticks++, 1000);


        // Regular function: this зависит от вызывателя
        // setInterval(function() { this.ticks++; }, 1000);
        // → this = undefined (strict) / window (sloppy) — баг!
    }
}
// 2. Нет arguments — используй rest
const sum = (...nums) => nums.reduce((a, b) => a + b, 0);


// arguments в стрелке ссылается на arguments внешней обычной функции!
function outer() {
    const inner = () => arguments[0]; // outer's arguments, не inner's
    return inner();
}
outer(42); // 42


// 3. Нет prototype
const Foo = () => {};
Foo.prototype; // undefined
// new Foo();  // TypeError: Foo is not a constructor
// 4. Где стрелки НЕЛЬЗЯ использовать:
const obj = {
    name: 'obj',


    // ❌ метод объекта: this = внешний контекст (window / undefined)
    getName: () => this?.name, // undefined — this не obj!


    // ✅ обычный метод
    getNameOk() { return this.name; }, // 'obj'
};


// Arrow class field vs prototype method:
class Foo {
    method() {}          // на Foo.prototype — ОДНА функция на все экземпляры
    arrow = () => {};    // class field — СВОЯ копия на каждом экземпляре!
}
// Arrow field: удобно для bind, но дорого по памяти

Итог: Arrow function наследует this из места определения (лексический scope). Идеальны для callbacks, но непригодны для методов объектов и конструкторов.