В чем разница между использованием this в Arrow Function и Basic Function?

Разница между this в Arrow Function и Basic Function

Привязка this

Basic Function (обычная функция) имеет динамическую привязку this. Её значение определяется в момент вызова функции и зависит от контекста исполнения:

const person = {
  name: "Иван",
  greet: function() {
    console.log(this.name); // "Иван" - this = person
  }
};

person.greet(); // "Иван"

const greetFunc = person.greet;
greetFunc(); // undefined или глобальный объект

Arrow Function (стрелочная функция) наследует this из лексического контекста — из области, где функция была определена. this не меняется независимо от того, как функция вызывается:

const person = {
  name: "Иван",
  greet: () => {
    console.log(this.name); // undefined (this из глобального scope)
  }
};

person.greet(); // undefined

Практические примеры

Проблема с Basic Function в методах класса:

class User {
  name = "Мария";
  
  getName() {
    return this.name;
  }
  
  getNameWithDelay() {
    setTimeout(function() {
      console.log(this.name); // undefined! this потерян
    }, 1000);
  }
}

const user = new User();
user.getName(); // "Мария"
user.getNameWithDelay(); // undefined

Решение с Arrow Function:

class User {
  name = "Мария";
  
  getNameWithDelay() {
    setTimeout(() => {
      console.log(this.name); // "Мария" - this сохранён
    }, 1000);
  }
}

const user = new User();
user.getNameWithDelay(); // "Мария"

Невозможность переопределения this

Arrow Function нельзя переопределить с помощью .call(), .apply() или .bind():

const greet = () => console.log(this);

const obj = { name: "Объект" };
greet.call(obj); // this остаётся неизменным
greet.apply(obj); // this остаётся неизменным
const boundGreet = greet.bind(obj); // bind игнорируется

Для Basic Function это работает:

function greet() {
  console.log(this.name);
}

const obj = { name: "Объект" };
greet.call(obj); // "Объект"
greet.apply(obj); // "Объект"
const boundGreet = greet.bind(obj); // "Объект"

Когда что использовать

Используй Basic Function для:

• Методов объектов и классов
• Конструкторов (хотя лучше use class)
• Когда нужна динамическая привязка this

Используй Arrow Function для:

• Callback'ов в setTimeout, setInterval
• Обработчиков событий
• Методов в React компонентах (функциональные компоненты)
• Когда нужно сохранить this из внешнего контекста

Этот принцип критичен для Node.js разработчиков при работе с асинхронным кодом и обработке ошибок в Promise цепочках.