Стрелочные функции в ES6: особенности и использование

Стрелочные функции, как известно, были представлены в ECMAScript 6 (ES6) как более короткий и проще в кодировании способ объявления функций в JavaScript. В данной статье мы рассмотрим две ключевые особенности стрелочных функций, которые были обозначены в вопросе: отсутствие собственного контекста 'this' и отсутствие поднятия (hoisting).

'This' в стрелочных функциях

Стрелочные функции в JavaScript ES6 не имеют собственного контекста 'this'. Вместо того, чтобы создавать свой собственный контекст, они используют значение 'this' из окружающего контекста.

let example = {
  name: 'Пример',
  regularFunction: function() {
    console.log(this.name);  // Выводит: Пример
  },
  arrowFunction: () => {
    console.log(this.name);  // Выводит: undefined
  }
}

В примере выше видно, что регулярная функция regularFunction имеет доступ к this.name, т.е. 'Пример'. В то же время, стрелочная функция arrowFunction не имеет собственного контекста 'this' и вместо этого пытается найти 'this.name' в окружающем контексте, который в данном случае является глобальным объектом window - без свойства 'name', отсюда и undefined.

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

Стрелочные функции также не поднимаются. "Hoisting" или поднятие - это механизм JavaScript, при котором объявления переменных и функций переносятся в начало текущего контекста выполнения. Но это не работает для стрелочных функций, и они остаются недоступными до того момента, когда исполнение кода доходит до строки их объявления.

console.log(arrowFunction()); // Ошибка: arrowFunction не определена

let arrowFunction = () => {
  return 'Стрелочная функция!'
};

В заключение, стоит помнить, что стрелочные функции в ES6, даже несмотря на их удобство и короткий синтаксис, имеют определенные особенности, которые могут значительно повлиять на их поведение в различных контекстах. Их правильное и осознанное использование поможет избежать нежелательных последствий и ошибок в коде.