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

В HTML 5 (ECMAScript 2015) стало возможно создавать функции в сокращённом виде, которая называется стрелочные функции (англ. Arrow functions).

// Обычная функция (Function Expression)
[1,2,3,4,5].map(function(element) {
  return element * 2;
});

// Стрелочная функция
[1,2,3,4,5].map((element) => {
  return element * 2;
});

Также код стрелочных функций можно сократить:

// Стрелочная функция
[1,2,3,4,5].map((element) => {
  return element * 2;
});

// Если передаётся один аргумент, то скобки можно убрать
[1,2,3,4,5].map(element => {
  return element * 2;
});

// Если используется только return, то можно ещё сократить
[1,2,3,4,5].map(element => element * 2);

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

Контекст (this)

Допустим есть следующий объект:

let Lang = function () {
    this.name = "JavaScript";
    this.frameworks = ['Vue', 'React', 'jQuery'];

    this.outputFrameworks = function() {
        this.frameworks.map(function(el, i) {
            // Внутри метода map() обращаемся к свойству "name"
            this.name; // undefined
        });
    }
};

На примере выше код внутри метода map() пытается получить свойство текущего объекта, но JavaScript возвращает «undefined» (т.е. свойство не задано).

Это из-за того, что ключевое слово this пытается найти свойства, которые созданы внутри map(). А т.к. внутри map() не было создано свойства «name», то JavaScript возвращает «undefined».

Если использовать стрелочные функции, то this будет искать свойства за пределами текущей функции.

let Lang = function () {
    this.name = "JavaScript";
    this.frameworks = ['Vue', 'React', 'jQuery'];

    this.outputFrameworks = function() {
        this.frameworks.map((el, i)  => {
            // Внутри метода map() обращаемся к свойству "name"
            this.name; // JavaScript
        });
    }
};

Похожие страницы

• JavaScript
• PHP