Рубрики
Без рубрики

Когда (и почему) вы должны использовать функции стрелки ES6 – и когда вы не должны

Cynthia Lee, когда (и почему) вы должны использовать функции стрелки ES6 – и когда вы должны носить функции (также называемые функциями arrow fators »), несомненно, одна из самых популярных функций ES6. Они представили новый способ написания кратких функций. Вот функция, написанная в синтаксисе ES5:

Автор оригинала: FreeCodeCamp Community Member.

Cynthia Lee.

Функции стрелки (также называемые «FAT AROW FUNATH»), несомненно, одна из самых популярных функций ES6. Они представили новый способ написания кратких функций.

Вот функция, написанная в синтаксисе ES5:

function timesTwo(params) {  return params * 2}function timesTwo(params) {
  return params * 2
}

timesTwo(4);  // 8

Теперь здесь та же функция, выраженная как функция стрелки:

var timesTwo = params => params * 2

timesTwo(4);  // 8

Это намного короче! Мы можем опустить курсовые брекеты и оператор возврата из-за неявных возвратов (но только если нет блока – больше на этом ниже).

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

Вариации

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

1. Нет параметров

Если нет параметров, вы можете разместить пустые скобки перед = & GT;

() => 42

На самом деле, вам даже не нужны скобки!

_ => 42

2. Один параметр

С этими функциями скобки являются необязательными:

x => 42  || (x) => 42

3. Несколько параметров

Скобки необходимы для этих функций:

(x, y) => 42

4. утверждения (в отличие от выражений)

В своей основной форме, а Функция выражение производит ценность, а Функция Операция выполняет действие.

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

Вот пример функции стрелки, используемой с помощью оператора IF:

var feedTheCat = (cat) => {
  if (cat === 'hungry') {
    return 'Feed the cat';
  } else {
    return 'Do not feed the cat';
  }
}

5. «Block Body»

Если ваша функция находится в блоке, вы также должны использовать явную Возвращение утверждение:

var addValues = (x, y) => {
  return x + y
}

6. объектные литералы

Если вы возвращаете объектный литерал, он должен быть завернут в скобки. Это заставляет переводчика оценивать то, что находится внутри скобок, а литерал объекта возвращается.

x =>({ y: x })

Синтаксически аноним

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

Эта анонимность создает некоторые проблемы:

  1. Сложнее отладить

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

2. Нет самоссылки

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

Основная выгода: нет связывания «этого»

В классических функциях выражения, это Ключевое слово связано с разными значениями, основанными на контекст в котором он называется. С помощью функций стрелки, однако, это это лексически связанный Отказ Это означает, что он использует это Из кода, который содержит функцию стрелки.

Например, посмотрите на Сетримс Функция ниже:

// ES5
var obj = {
  id: 42,
  counter: function counter() {
    setTimeout(function() {
      console.log(this.id);
    }.bind(this), 1000);
  }
};

В примере ES5 .bind (это) требуется, чтобы помочь пройти это контекст в функцию. В противном случае по умолчанию это будет неопределенным.

// ES6
var obj = {
  id: 42,
  counter: function counter() {
    setTimeout(() => {
      console.log(this.id);
    }, 1000);
  }
};

Функции стрелки ES6 не могут быть связаны с это Ключевое слово, так что это будет лексически подняться по объему и использовать значение это В объеме, в котором он был определен.

Когда вы не должны использовать функции стрелки

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

Вот несколько случаев, когда вы, вероятно, не хотели бы использовать их:

  1. Методы объекта

Когда вы звоните Cat.Jumps количество жизней не уменьшается. Это потому, что это не связан ни к чему, и наследует ценность это от его родительской массы.

var cat = {
  lives: 9,
  jumps: () => {
    this.lives--;
  }
}

2. Обратный вызов функции с динамическим контекстом

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

var button = document.getElementById('press');
button.addEventListener('click', () => {
  this.classList.toggle('on');
});

Если мы нажмем кнопку, мы получим бы типа «Видэрмер». Это потому, что это не связан с кнопкой, но вместо этого привязан к его родительской области.

3. Когда это делает ваш код менее читаемым

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

Когда вы должны использовать их

Стрелка функционирует лучше всего со всем, что требует это быть связанным с контекстом, а не сама функция.

Несмотря на то, что они анонимны, я также люблю использовать их методами, такими как карта и Уменьшить , потому что я думаю, что это делает мой код более читаемым. Для меня плюсы перевешивают минусы.

Спасибо за чтение моей статьи и поделитесь, если вам понравилось! Проверьте мои другие статьи, такие как я построил свое приложение Pomodoro Clock, и уроки, которые я узнал по пути, и давайте DemyStify’s ‘New’ New ‘.