21. Стрелочные vs обычные функции

JavaScript: Стрелочные vs Обычные Функции

Функции – фундаментальный строительный блок JavaScript. В этом уроке мы разберем два основных типа функций: обычные функции и стрелочные функции, изучим их различия и научимся выбирать подходящий тип для конкретной задачи.

Обычные Функции

Обычные функции объявляются с использованием ключевого слова function. Они обладают гибкостью и имеют доступ к специальному объекту this, контекст которого определяется тем, как функция была вызвана.

function greet(name) {
  console.log("Привет, " + name + "!");
}

greet("Мир"); // Вывод: Привет, Мир!

Внутри обычной функции this может ссылаться на разные вещи, в зависимости от контекста вызова. Например, если функция является методом объекта, то this будет ссылаться на этот объект.

const person = {
  name: "Иван",
  greet: function() {
    console.log("Привет, " + this.name + "!");
  }
};

person.greet(); // Вывод: Привет, Иван!

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

Стрелочные функции – это более компактный синтаксис для написания функций. Они были введены в ES6 (ECMAScript 2015).

const greetArrow = (name) => {
  console.log("Привет, " + name + "!");
};

greetArrow("Вселенная"); // Вывод: Привет, Вселенная!

Если функция содержит только одно выражение, можно опустить фигурные скобки и return:

const square = (x) => x * x;

console.log(square(5)); // Вывод: 25

Ключевое отличие: Стрелочные функции не имеют собственного this. Они наследуют this от окружающего контекста (лексический this). Это делает их удобными для использования внутри других функций, где требуется доступ к this внешней функции.

const person = {
  name: "Елена",
  greet: function() {
    setTimeout(() => {
      console.log("Привет, " + this.name + "!"); // this ссылается на person
    }, 1000);
  }
};

person.greet(); // Вывод: Привет, Елена! (через 1 секунду)

В этом примере, если бы мы использовали обычную функцию внутри setTimeout, нам бы пришлось использовать bind или сохранять this во временную переменную, чтобы получить доступ к person.name. Стрелочная функция избавляет нас от этой необходимости.

Жизненный пример

В React стрелочные функции часто используются для обработчиков событий:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.handleClick = this.handleClick.bind(this); // Не нужно, если используем стрелочную функцию
  }

  handleClick = () => { // Стрелочная функция
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Увеличить: {this.state.count}
      </button>
    );
  }
}

Использование стрелочной функции позволяет избежать необходимости привязывать контекст (this) к методу handleClick в конструкторе. В библиотеках, активно использующих коллбэки (например, работа с AJAX), стрелочные функции упрощают код и делают его более читабельным.

Ключевые моменты

Синтаксис: Стрелочные функции предлагают более короткий синтаксис.
this: Стрелочные функции не имеют собственного this, а наследуют его из окружающего контекста. Обычные функции определяют this в зависимости от вызова.
arguments: Стрелочные функции не имеют объекта arguments.
Использование: Стрелочные функции идеально подходят для коротких функций, особенно внутри других функций, где требуется доступ к this внешней функции. Обычные функции подходят для создания методов объектов и функций, где требуется гибкое управление контекстом this.
Конструктор: Стрелочные функции не могут быть использованы как конструкторы (нельзя использовать new с ними).