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

1656605415 kogda i pochemu sleduet ispolzovat funkczii strelok es6 a kogda

от Синтии Ли

s2aEYgjNLkSMH5RxJRuZrJWhWcor0gmZC5tb

Функции со стрелками (также называемые «функциями жирной стрелки»), несомненно, являются одной из наиболее популярных функций 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

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

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

Вариации

c1-i0BPczDkbeDybCAzWCHsEyVFX0Ttg5bpL
Разнообразие – это пряность жизни

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

1. Без параметров

Если параметров нет, перед ними можно поставить пустые скобки =>.

() => 42

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

_ => 42

2. Единичный параметр

Для этих функций скобки необязательны:

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

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

Для этих функций нужны скобки:

(x, y) => 42

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

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

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

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

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

5. «Тело блока»

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

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

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

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

x =>({ y: x })

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

hS7maItiZiV0IIYACtt0PiD3VStILiS1n4sd

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

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

  1. Труднее налаживать

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

2. Без ссылки на себя

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

Основное преимущество: нет привязки «это»

3Rc2e8J5whHdFrH3IzPckp5GCQ-QtMvEOH1k
Фото: Davide Ragusa на Unsplash

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

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

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

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

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

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

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

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

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

  1. Объектные методы

Когда ты звонишь cat.jumps, количество жизней не уменьшается. Это потому, что this не привязан ни к чему, и унаследует значение this по его родительскому объему.

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

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

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

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

При нажатии кнопки мы получим TypeError. Это потому, что this не привязан к кнопке, а привязан к его родительской области.

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

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

Когда следует их использовать

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

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

Спасибо, что прочли мою статью, и поделитесь, если она вам понравилась! Просмотрите другие мои статьи, например «Как я создал свою программу Pomodoro Clock», и уроки, которые я извлек на этом пути, а также «Дай-мистифицируем новое» ключевое слово JavaScript.

Добавить комментарий

Ваш адрес email не будет опубликован.