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

Стрелочные функции - это функции, которые были введены в ES2015. Считается особенностями ES6.

Функции со стрелками не используют ключевое слово функции, тогда как функции JavaScript используют ключевое слово функции для объявления функций.

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

Вызов функции такой же в традиционных и стрелочных функциях.

Декларация традиционных функций

var traditionalFunction= function(){
    console.log('Arrow function example');
}
traditionalFunction();

Объявление стрелочных функций

const arrowFunction = () => {
    console.log('Arrow function example');
}
arrowFunction();

Вышеупомянутая стрелочная функция - это основной способ объявления, в котором не используется ключевое слово «функция».

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

Объявление функции однострочной стрелки

const arrowFunction = () => console.log('Arrow function example');
arrowFunction();

Стрелочные функции с параметрами

const arrowFunction = (a) => {
    return a;
}
arrowFunction(10);

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

const arrowFunction = a => return a;
arrowFunction(10);

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

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

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

Функции стрелок как методы и «этот» контекст

В традиционной функции «это» всегда относится к текущему контексту выполнения, тогда как в стрелочной функции «этот» контекст всегда относится к уровню окна.

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

window.value = 20;
var obj = {
  value: 1,
  getArrowFunction: () => 'arrow function: '+ this.value,
  getTraditionalFun: function() {
  return 'Traditional function: '+ this.value
 }
}
console.log(obj.getArrowFunction()) // "arrow function: 20"
console.log(obj.getTraditionalFun()) // "Traditional function: 1"

Из вышеизложенного

1. getArrowFunction - это метод, который определяется с помощью стрелочной функции.
2. getTraditionalFun - это метод, который определяется с использованием традиционного синтаксиса функции.
3. У нас есть два свойства «значения», то есть ... свойство уровня окна и свойство уровня объекта.
4. Когда мы видим ожидаемый результат, this.value всегда указывает на объект окна, тогда как для традиционных функций он всегда указывает на контекст выполнения. Когда у нас нет оконного объекта со свойством «значение», тогда свойство «значение» внутри стрелочной функции всегда не определено.

Возврат объекта из функции стрелки в одной строке

const getArrowFunOne= () => {a: 10}
const getArrowFunTwo = () => ({a: 10})
console.log(getArrowFunOne()); // undefined
console.log(getArrowFunTwo()); // {a: 10}

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

Стрелочные функции как анонимная функция

var  getTraditionalInfo = function() {
 setTimeout(() => {
     console.log('Anonymous function');
    }, 1000)
}
 console.log(getTraditionalInfo());

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

Еще несколько примеров использования и понимания функций стрелок

1. Мы не можем использовать объект arguments в стрелочных функциях.
2. Мы можем использовать операторы отдыха в качестве параметров функций в стрелочных функциях.
3. Использование call, bind и apply не будет указывать на контекст выполнения, вместо этого он использует глобальный контекст окна.
4. Мы не можем использовать прототип для стрелочных функций.
5. Мы не можем использовать функции генератора в качестве функций.
6. Стрелочные функции не поддерживают ключевое слово yield.