JavaScript: Функции стрелок


Введение

Стрелочная функция — это альтернативная форма создания функции в JavaScript. Она была введена в ES6.

Они называются стрелочные функции, поскольку создаются с помощью символа стрелки =>.

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

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

Стрелочные функции — это анонимные функции. Это означает, что они не могут иметь имени. Вы можете обойти это, присвоив их переменной и вызывая их с именем этой переменной.

Давайте рассмотрим простое преобразование обычной функции в стрелочную.

function add(x, y) {
  return x + y;
}

// we assign an anonymous function to a variable
const add = function (x, y) {
  return x + y;
};

// we remove "function" keyword and add an arrow after arguments
const add = (x, y) => {
  return x + y;
};
Вход в полноэкранный режим Выход из полноэкранного режима

Стрелочные функции позволяют нам использовать еще более короткий синтаксис.

// returns x + y
// the same function in one line
const add = (x, y) => x + y;

// you can skip parentheses when using only one argument
const add1 = (x) => x + 1;
Ввести полноэкранный режим Выход из полноэкранного режима

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

Вы можете опустить { } и ключевое слово return, и выражение после => будет значением, возвращаемым из этой функции.

При возврате объекта нужно помнить о добавлении ( ).

// this won't work
const createUser = (id, name) => {
    id: id,
    name: name
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Вам нужно добавить круглые скобки, чтобы убедиться, что вы возвращаете объект.

const createUser = (id, name) => ({
  id: id,
  name: name,
});
Вход в полноэкранный режим Выход из полноэкранного режима

Использование короткой формы для улучшения читабельности кода

Давайте рассмотрим, как использование короткой формы функции стрелки может улучшить читаемость кода при возврате функции из другой функции.

function createAddFunction(number) {
  return function (x) {
    return x + number;
  };
}
Вход в полноэкранный режим Выход из полноэкранного режима

createAddFunction — это функция, которая создает другую функцию. Этот паттерн называется currying. Вы можете использовать ее, например, для создания функции, которая увеличивает число на 1.

const add1 = createAddFunction(1);
add1(5); // 6
Вход в полноэкранный режим Выход из полноэкранного режима

Определение функции createAddFunction можно сократить, используя только что изученные особенности функции arrow. Давайте посмотрим, как сократить его до одной строки.

// Initial version
function createAddFunction(number) {
  return function (x) {
    return x + number;
  };
}

// changing the inner function to arrow function
function createAddFunction(number) {
  return (x) => x + number;
}

// changing the outer function to arrow function
const createAddFunction = (number) => (x) => x + number;

// Arrow function version
const createAddFunction = (number) => (x) => x + number;
Вход в полноэкранный режим Выход из полноэкранного режима

В чем различия между обычными и стрелочными функциями

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

Самое важное различие заключается в том, как ведет себя this внутри этих двух типов объявления функций.

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

const logThisOutside = () => {
  console.log(this);
};

function Button() {
  this.name = "My Button";
  function logThis() {
    console.log(this);
  }
  const logThisArrow = () => {
    console.log(this);
  };

  logThis(); // Window
  logThisArrow(); // { name: 'My Button' }
  logThisOutside(); // Window
}

new Button();
Вход в полноэкранный режим Выход из полноэкранного режима

Как вы видите, logThisArrow и logThisOutside используют значение this из того места, в котором они были определены. Это происходит потому, что в отличие от обычной функции, стрелочные функции не создают свой собственный this, а используют значение из внешней области видимости.

Использование this в стрелочных функциях в ваших интересах

function Button() {
  this.name = "My Button";

  const that = this;
  document.querySelector("button").addEventListener("click", function () {
    console.log("click", this); // Button DOM Element
    console.log("that", that); // { name: 'My Button' }
    this.name = "Button Clicked"; // won't work as expected
    that.name = "Button Clicked"; // name value changed
  });

  document.querySelector("button").addEventListener("click", () => {
    console.log("click arrow", this); // { name: 'My Button' }
    this.name = "Button Clicked"; // name value changed
  });
}

new Button();
Вход в полноэкранный режим Выход из полноэкранного режима

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

В случае использования обычной функции в слушателе событий, при нажатии на кнопку в ней будет отображаться значение элемента DOM, на котором был сделан щелчок. Если мы захотим изменить значение this.name, нам придется сначала создать переменную const that = this, а затем изменить ее на that.name = 'Button Clicked. Это обычный хак, используемый для модификации this из внешней области видимости.

Как уже упоминалось, стрелочные функции не создают своего собственного this, поэтому вы можете смело изменять значение name с помощью this.name = Button Clicked.

Доступ к аргументам в стрелочных функциях

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

Давайте посмотрим, как arguments работает в обычной функции.

function add() {
  console.log(arguments);
}

add(1, 2, 3); // console: [1, 2, 3]
Вход в полноэкранный режим Выход из полноэкранного режима

Регулярная функция имеет доступ к специальной переменной arguments, которая хранит все аргументы, с которыми была вызвана функция, даже если они не были определены между скобками.

Стрелочные функции не создают переменную arguments, но есть другое решение, которое мы можем использовать для достижения того же — rest parameters.

const add = (...args) => {
  console.log(args);
};

add(1, 2, 3); // console: [1, 2, 3]
Вход в полноэкранный режим Выход из полноэкранного режима

Оцените статью
devanswers.ru
Добавить комментарий