Продолжая мою предыдущую статью Я потерялся с этим -JavaScript », мы поговорим о функции стрелки или функции толстой стрелки. Это новая концепция ECMAScript 6. Это очень лаконичный способ написания функции. Мудрый синтаксис действительно короче старого подхода. Давай поговорим об этом подробнее

Преимущества стрелочной функции

  • Более короткий синтаксис, чем функциональное выражение и
  • Не имеет своего this
  • Их нельзя использовать в качестве конструкторов.
  • У них нет свойства прототипа

У стрелочной функции более короткий синтаксис

Старый способ (ES5) против функции стрелки (ES6)

В приведенном выше примере 3 строки функции ES5 теперь могут быть повторно использованы как одна строка функции как строка номер 7. Легко? Давайте посмотрим еще на один пример функции стрелки ES6.

(() => {console.log(‘hey’)})(); // Immediate invoke function using arrow
setTimeOut(()=>()); // set Time out this binding will never lost
let max = (a, b) => a > b ? a : b;

А теперь перейдем ко второму пункту, моему любимому. Функция стрелки не поддерживает эту привязку ... Да ... давайте посмотрим, как

Не имеет собственного «Этого»

ES5

В вышеупомянутом примере. Мы применяем третье правило привязки, а именно явную привязку. Следовательно, мы передаем «this», то есть baseV, в нашу функцию с параметром param. Так что ожидаемый результат будет 6. Но со стрелочной функцией есть некоторая изюминка.

ES6

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

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

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

Например

this // this here
setTimeOut(()=> {
// do what ever you want, this will be same here.
},1000);

И то же самое для вызова ajax или http-запроса

Их нельзя использовать в качестве конструкторов.

Для нормальной функции

let baz = new boo();

Во-первых, мы понимаем, как будет работать приведенный выше код?

Для приведенного выше кода произойдет 4 следующих события:

  1. Будет создан новый пустой объект.
  2. Этот вновь созданный объект будет связан с цепочкой прототипов.
  3. Вновь созданный объект будет ссылаться на эту привязку функции boo
  4. Наконец, вновь созданный объект вернет

Теперь посмотрим на функцию стрелки.

var Foo = () => {};
var foo = new Foo();

На самом деле эти 4 точки не будут действительны для стрелочной функции, а просто для понимания концепции. Предположим, что то же самое произойдет до пункта 2… но по мере продвижения к пункту 3 мы получим ошибку. Почему ? потому что привязка функции Foo не может быть выполнена, поскольку у нее нет собственного this. Разберитесь сейчас ... вот почему ❤ Я люблю JS ❤

У них нет свойства прототипа

В пункте выше мы предположили, что он будет связан с прототипом, но поскольку… у нас нет концепции «this» в стрелочной функции, поэтому наша вторая точка также не сработает. Мы будем работать только с областью вызова функции, поэтому привязка к new работать не будет.

Короче говоря, функция стрелки не поддерживает прототип [точка].

var Foo = () => {};
foo.prototype // undefined

Надеюсь, вам понравится моя статья. Пожалуйста, поделитесь со мной своим мнением.