ES6 – arrow functions

javascript

Kolejnym elementem standardu ECMAScript 2015 będą bez wątpienia arrow functions. Znane również jako fat functions, pozwolą tworzyć kod bez – zbędnego w wielu przypadkach – słowa kluczowego function oraz ze zbindowanym this do ciała funkcji.


Zobacz całą serię: Let-s talk about ECMAScript 2015


Syntactic sugar

(w oryginalnym artykule użyłem właśnie tego nagłówka, jako, że polski odpowiednik brzmi idiotycznie)

Spójrzmy na sygnaturę nowej składni anonimowej funkcji:

([param] [, param]) => {
 statements
}
           param => expression
(param1, param2) => { block }

, którą możemy użyć w następujący sposób:

    () => { … }            // no argument
     x => { … }            // one argument
(x, y) => { … }            // several arguments
     x => { return x * x } // block
    x => x * x             // expression, same as above
Pamiętaj: każda tak tworzona funkcja jest anonimowa!

Wyrażenia lambda w JavaScript! Wspaniale :)

Zamiast pisać:

[3, 4, 5].map(function (n) {
 return n * n;
});

możemy po prostu zrobić coś takiego:

[3, 4, 5].map(n => n * n);

Już jest dobrze, a jest coś jeszcze..

Fixed “this” = lexical “this”

Funkcja tworzona przy pomocy konstrukcji z => binduje this wewnątrz ciała funkcji w miejscu jej deklaracji, a nie użycia. Tym samym nie musimy już używać funkcji bind, call czy apply. Nie musimy również tworzyć konstrukcji typu:

var self = this;

Dla mnie to naprawdę spore ułatwienie, a przy okazji sposób na lepszą optymalizację kodu.

// ES5
function FancyObject() {
 var self = this;
 
 self.name = 'FancyObject';
 setTimeout(function () {
  self.name = 'Hello World!';
 }, 1000);
}

// ES6
function FancyObject() {
 this.name = 'FancyObject';
 setTimeout(() => {
  this.name = 'Hello World!'; // properly refers to FancyObject
 }, 1000);
}

Konstrukcja funkcji za pomocą =>, to:

  • typeof zwracające function
  • instanceof zwracające Function

, ale niestety także kilka niedogodności:

  • Tak stworzona funkcja nie może być użyta w formie konstruktora i każde jej wywołanie ze słowem new rzuci wyjątek.
  • Fixed this oznacza, że wartość zbindowana wewnątrz funkcji nie może zostać zmieniona przez cały cykl jej życia.
  • Funkcja nie może być funkcją nazwaną.
  • Nie mamy samej deklaracji funkcji, stąd nie istnieje tutaj hoisting pozwalający użyć danej funkcji przed jej inicjalizacją.