Wyrażenia funkcji to funkcje
w miejscu, w którym powinno być wyrażenie. Z funkcją
jako wartości przypisanych do zmiennej. Chociaż deklaracja funkcji
zawsze wymaga nazwy, do utworzenia anonimowego możesz użyć wyrażeń funkcji
, pomijając identyfikator, a potem wpisując słowo kluczowe function z parametrem
nawiasy zawierające parametry opcjonalne:
const myVariable = function() { };
Możesz wtedy zadzwonić do tych wyrażenia funkcji używające identyfikatora zmiennej:
const myVariable = function() {
console.log( "This is my function." );
};
myVariable();
> "This is my function."
Do tworzenia funkcji nazwanych możesz też używać wyrażeń funkcyjnych, stosując składnię podobną do deklaracji funkcji:
const myVariable = function myFunction() {
console.log( "This is my function." );
};
myVariable();
> "This is my function."
W przeciwieństwie do deklaracji funkcji wyrażenia funkcji nazwanej można jednak wywoływać po nazwie tylko w obrębie samej funkcji:
const myVariable = function myFunction() {
console.log( `I'm a ${ typeof myFunction }.`);
};
typeof myFunction;
> "undefined"
typeof myVariable;
> "function"
myVariable();
> "I'm a function."
Nazwy powiązane z wyrażeniami funkcji są przydatne przede wszystkim podczas debugowania. O wyrażenie funkcji nazwanej może też wywoływać się rekursywnie, ale nie jest to bardzo typowy przypadek użycia:
const myVariable = function myFunction() {
console.log( "One second elapsed." );
setTimeout( myFunction, 1000 );
};
setTimeout( myVariable, 1000 );
> "One second elapsed."
> "One second elapsed."
> "One second elapsed."
…
Wyrażenia funkcji strzałki
Wyrażenia funkcji strzałki (często nazywane „funkcjami strzałki” lub rzadziej „funkcjami lambda”) zostały wprowadzone w ES6, aby zapewnić zwięzły sposób tworzenia anonimowych wyrażeń funkcji z niektórymi unikalnymi zachowaniami.
Funkcję strzałki można utworzyć wszędzie tam, gdzie powinno być wyrażenie, na przykład
jako wartość przypisaną do zmiennej. W najczęstszej postaci funkcja strzałki składa się z pary pasujących nawiasów zawierających co najmniej 0 parametrów, strzałki utworzonej z jednego znaku = i znaku > (=>) oraz pary pasujących nawiasów klamrowych zawierających ciało funkcji:
const myFunction = () => {};
W pewnych okolicznościach możesz jeszcze bardziej zmniejszyć składnię. Jeśli używając tylko jednego parametru, możesz pominąć nawiasy początkowe:
const myFunction = myParameter => {};
Jeśli chcesz, by treść funkcji zwracała wartość pojedynczego wyrażenia,
ani w nawiasach klamrowych, ani w nawiasach klamrowych.
słowo kluczowe return jest wymagane:
const myFunction = () => 2 + 2
myFunction()
> 4
Funkcje strzałek są unikalne, ponieważ nie mają własnego kontekstu
arguments lub
this wartości. Dziedziczą one tylko
z funkcji strzałki
środowisko leksykalne, najbliższą z nich
która zapewnia te konteksty.
function myParentFunction() {
this.myProperty = true;
let myFunction = () => {
console.log( this );
}
myFunction();
};
let myInstance = new myParentFunction();
> Object { myProperty: true }
Funkcja wywołania strzałki
Funkcje strzałek nie wiążą argumentów w taki sam sposób jak inne typy funkcji.
Obiekt arguments w ciele funkcji strzałki dziedziczy swoją wartość z najbliższego leksykalnego otoczenia tej funkcji:
function myFunction() {
let myArrowFunction = () => {
console.log( arguments[ 0 ] );
}
myArrowFunction( true );
};
myFunction( false );
> false
W tym przykładzie funkcja zewnętrzna wywoływana z argumentem false wywołuje
funkcji strzałki wewnętrznej przy użyciu argumentu true. Obiekt arguments
wewnątrz funkcji strzałki przechodzi do wiązania w funkcji zewnętrznej,
funkcja wewnętrzna rejestruje parametr false funkcji zewnętrznej.
Jeśli nie ma obiektu arguments do dziedziczenia z kontekstu nadrzędnego, strzałka
obiekt arguments funkcji nie jest zdefiniowany, a próba uzyskania do niego dostępu powoduje
błąd:
let myArrowFunction = () => {
console.log(arguments);
};
myArrowFunction( true );
> Uncaught ReferenceError: arguments is not defined
Natychmiast wywołane wyrażenia funkcji (IIFE)
Wyrażenie funkcji wywoływanej natychmiast (IIFE), zwane też „samodzielnie wykonującą anonimową funkcją”, to wyrażenie funkcji wywoływane natychmiast po zdefiniowaniu. IIFE używa wyrażenia funkcji utworzonego przez umieszczanie funkcji w operatorze grupowania. Druga pasująca para nawiasów wywołuje funkcję albo od razu po samej definicji funkcji lub bezpośrednio po grupowaniu . Jeśli używasz funkcji standardowej, nie ma praktycznej różnicy można wybrać jedną z tych 2 metod:
(function() {
console.log( "IIFE.")
}
)();
> "IIFE."
(function() {
console.log( "IIFE.")
}
());
> "IIFE."
Pierwszy przykład wywołuje zgrupowane wyrażenie funkcji. Drugi przykład wywołuje deklarację funkcji wewnątrz operatorów grupowania, a wynik końcowy jest następnie oceniane jako zgrupowane wyrażenie. Wynik jest taki sam w obu przypadkach tych kwestii.
Występuje jednak różnica, jeśli IIFE jest funkcją strzałki. W tym wielkość liter, nawiasy używane do wywołania funkcji muszą znajdować się poza funkcją grupowania operatorów, ponieważ funkcja strzałki sama w sobie nie jest wyrażeniem, ale musi być tworzone w kontekście, w którym oczekuje się wyrażenia. Próba wywołania funkcji strzałki w zakresie operatorów grupowania oznaczałaby wywołanie funkcji strzałki, która nie została jeszcze utworzona w kontekście wyrażenia:
( () => {
console.log( "IIFE." );
}() );
> Uncaught SyntaxError: missing ) in parenthetical
Ponieważ operatory grupowania oczekują wyrażenia, funkcja strzałka działa w obrębie są zdefiniowane, dzięki czemu nawiasy za nimi wywołują funkcję zgrupowanych wyrażenie:
( () => {
console.log( "IIFE." );
} )();
> "IIFE."
Starsze aplikacje, często używane IIFE do zarządzania zakresem, zwłaszcza w unikaj zanieczyszczenia zakresu globalnego, za pomocą zmiennych ograniczonych do funkcji i deklaracje funkcji. Przed wprowadzeniem określania zakresu bloków w ES6 powszechną praktyką było umieszczanie całego skryptu w IIFE, aby zapobiegać przypadkowe zanieczyszczenie powietrza o skali globalnej.
Sprawdź swoją wiedzę
Czy można wywołać wyrażenie funkcji nazwanej, używając nazwy poza ?