arrowFunction

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

ES6

🎓 Синтаксис

⛔ function

В сигнатуре стрелочной функции нет слова function

( параметры ) => { тело функции }

☕

var res = ( x, y ) => x * y
res ( 2, 5 )

🔳 Если тело функции состоит из одной операции, фигурные скобки можно опустить

( name = "user" ) => console.info ( "Hi, " + name )

🔳 Если у функции всего один формальный параметр, круглые скобки можно опустить

name => console.info ( "Hi, " + name )

🔳 При отсутствии формальных параметров круглые скобки обязательны

() => console.info ( "Hi, user"  )

🔳 Если тело функции состоит из одного выражения, значение которого возвращает функция, оператор return не используется

☕ обычная функция

var res = function ( x, y ) { return x * y }

☕ стрелочная функция

var res = ( x, y ) => x * y

🔳 Операторы ветвления кода ( кроме тернарного оператора ) и операторы цикла нужно заключать в фигурные скобки

☕ оператор for

() => {
    for ( var i = 0; i < 5; i++ )
        console.log ( i )
}

☕ оператор switch

var answerArrow = question => { 
    switch ( question ) {
        case "who":
            return "student"
        case "what":
            return "develop" 
        case "where":
            return "Kharkiv" 
        default:
            return "I don't undestand your question"
    }
}

☕ тернарный оператор

var answerArrow = question =>  
    question === "who" ? "Irina" :
        question === "what" ? "develop" :
            question === "where" ? "Kharkiv" :
                "I don't undestand your question"

---

🎓 Три главные особенности стрелочных функций

⛔ prototype

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

⚠️ Поэтому стрелочные функции не могут быть конструктором

var arrowFunc = () => {}
console.dir ( arrowFunc )

const usualFunc = function () {}
console.dir ( usualFunc )

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

▼ arrowFunc ()
    arguments: (...)
    caller: (...)
    length: 0
    name: "func"
  ► __proto__: ƒ ()

Обычная функция

▼ ƒ usualFunc ()
    arguments: null
    caller: null
    length: 0
    name: "usualFunc"
  ► prototype: {constructor: ƒ}
  ► __proto__: ƒ ()

⚠️ При попытке вызвать стрелочную функцию с ключевым словом new

var obj = new arrowFunc()

будет сгенерировано исключение:

🛑 TypeError: arrowFunc is not a constructor

---

⛔ arguments

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

При попытке обратиться к объекту arguments из стрелочной функции будет сгенерировано исключение ( ReferenceError )

☝️ Если стрелочная функция объявлена внутри обычной функции, то переменные контекста родительской функции будут доступны для стрелочной функции ( цепочка областей видимости ), поэтому внутри нее будет доступен объект arguments родительской функции

☕

function testArguments () {
    var arrowFunc = () =>  console.log ( arguments )
    arrowFunc ()
}
testArguments ( 5, false )

В результате работы кода в консоль будет выведен объект arguments функции testArguments

---

🎓 Контекст вызова

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

Изменить контекст вызова стрелочной функции невозможно

Можно сказать, что у стрелочных функций "врожденный" контекст вызова

☕ Литерал объекта

var obj = {
    test: () => console.log ( this )
}
obj.test()   // window

☕ Конструктор

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

---

🎓 Обработчики событий

☕ стрелочная функция

document.querySelector ( "button" )
    .onclick = 
        event =>  console.log ( event.type, this )

this будет указывать на глобальный объект window

☕ обычная функция

document.querySelector ( "button" )
    .onmouseover = function ( event ) {
        console.log ( event.type, this )
    }

this будет указывать на элемент button

---

🎓 Потеря контекста

В примере ниже экземпляр x создан с помощью конструктора Constr

Публичный метод arrowFunc() объявлен с помощью стрелочной функции

Публичный метод usialFunc() объявлен с помощью обычной функции

При передаче метода arrowFunc() переменной z:

var z = x.arrowFunc

контекст сохраняется,

а при передаче метода usialFunc() переменной w:

var w = x.usialFunc

контекст меняется, и this уже указывает на глобальный объект window

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

У обычной функции контекст вызова может отличаться от контекста, в котором она была создана

---

🎓 Изменение контекста

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

Объявим две функции в глобальной области видимости:

var arrowFunc = () => console.log ( this )
var usialFunc = function () {
    console.log ( this )
}

Теперь создадим объект obj с единственным свойством name:

obj = { name: "sample" }

и добавим ему методы testArrow и testUsial:

obj.testArrow = arrowFunc
obj.testUsial = usialFunc

Теперь вызовем оба метода

obj.testArrow ()
obj.testUsial ()

Как видим, несмотря на то, что вызов осуществляется в контексте объекта obj, testArrow "работает" в контексте, в котором была создана функция arrowFunc, т.е. в глобальном контексте

Что касается метода testUsial, то он работает в контексте вызова, т.е. в контексте объекта obj

---

Тесты