W tym samouczku nauczysz się funkcji strzałek JavaScript na podstawie przykładów.
Funkcja strzałki jest jedną z funkcji wprowadzonych w wersji ES6 języka JavaScript. Pozwala tworzyć funkcje w bardziej przejrzysty sposób w porównaniu do zwykłych funkcji. Na przykład
ta funkcja
// function expression let x = function(x, y) ( return x * y; )
można zapisać jako
// using arrow functions let x = (x, y) => x * y;
za pomocą funkcji strzałki.
Składnia funkcji strzałki
Składnia funkcji strzałkowej to:
let myFunction = (arg1, arg2,… argN) => ( statement(s) )
Tutaj,
myFunction
to nazwa funkcjiarg1, arg2,… argN
są argumentami funkcjistatement(s)
jest treścią funkcji
Jeśli treść ma jedną instrukcję lub wyrażenie, możesz zapisać funkcję strzałki jako:
let myFunction = (arg1, arg2,… argN) => expression
Przykład 1: Funkcja strzałki bez argumentu
Jeśli funkcja nie przyjmuje żadnego argumentu, powinieneś użyć pustych nawiasów. Na przykład,
let greet = () => console.log('Hello'); greet(); // Hello
Przykład 2: Funkcja strzałki z jednym argumentem
Jeśli funkcja ma tylko jeden argument, możesz pominąć nawiasy. Na przykład,
let greet = x => console.log(x); greet('Hello'); // Hello
Przykład 3: Funkcja strzałki jako wyrażenie
Możesz także dynamicznie tworzyć funkcję i używać jej jako wyrażenia. Na przykład,
let age = 5; let welcome = (age console.log('Baby') : () => console.log('Adult'); welcome(); // Baby
Przykład 4: Wielowierszowe funkcje strzałek
Jeśli treść funkcji ma wiele instrukcji, musisz umieścić je w nawiasach klamrowych ()
. Na przykład,
let sum = (a, b) => ( let result = a + b; return result; ) let result1 = sum(5,7); console.log(result1); // 12
to z funkcją strzałki
Wewnątrz zwykłej funkcji to słowo kluczowe odnosi się do funkcji, w której jest wywoływane.
Jednak this
nie jest powiązany z funkcjami strzałkowymi. Funkcja strzałki nie ma własnej this
. Więc za każdym razem, gdy dzwonisz this
, odnosi się do zakresu nadrzędnego. Na przykład,
Wewnątrz zwykłej funkcji
function Person() ( this.name = 'Jack', this.age = 25, this.sayName = function () ( // this is accessible console.log(this.age); function innerFunc() ( // this refers to the global object console.log(this.age); console.log(this); ) innerFunc(); ) ) let x = new Person(); x.sayName();
Wynik
25 niezdefiniowane okno ()
Tutaj this.age
wnętrze this.sayName()
jest dostępne, ponieważ this.sayName()
jest metodą obiektu.
Jednakże, innerFunc()
jest to normalne działanie i this.age
nie jest dostępny, ponieważ this
odnosi się do globalnego obiektu (obiekt okna w przeglądarce). Stąd this.age
wewnątrz innerFunc()
funkcji daje undefined
.
Wewnątrz funkcji strzałkowej
function Person() ( this.name = 'Jack', this.age = 25, this.sayName = function () ( console.log(this.age); let innerFunc = () => ( console.log(this.age); ) innerFunc(); ) ) const x = new Person(); x.sayName();
Wynik
25 25
Tutaj innerFunc()
funkcja jest definiowana za pomocą funkcji strzałki. Wewnątrz funkcji strzałki this
odnosi się do zakresu rodzica. Stąd this.age
daje 25 .
Wiązanie argumentów
Zwykłe funkcje mają powiązanie argumentów. Dlatego kiedy przekazujesz argumenty do zwykłej funkcji, możesz uzyskać do nich dostęp za pomocą arguments
słowa kluczowego. Na przykład,
let x = function () ( console.log(arguments); ) x(4,6,7); // Arguments (4, 6, 7)
Funkcje strzałkowe nie mają powiązania argumentów.
Kiedy spróbujesz uzyskać dostęp do argumentu za pomocą funkcji strzałki, spowoduje to błąd. Na przykład,
let x = () => ( console.log(arguments); ) x(4,6,7); // ReferenceError: Can't find variable: arguments
Aby rozwiązać ten problem, możesz użyć składni rozkładu. Na przykład,
let x = (… n) => ( console.log(n); ) x(4,6,7); // (4, 6, 7)
Funkcja strzałki z obietnicami i oddzwonieniami
Funkcje strzałkowe zapewniają lepszą składnię do zapisywania obietnic i wywołań zwrotnych. Na przykład,
// ES5 asyncFunction().then(function() ( return asyncFunction1(); )).then(function() ( return asyncFunction2(); )).then(function() ( finish; ));
można zapisać jako
// ES6 asyncFunction() .then(() => asyncFunction1()) .then(() => asyncFunction2()) .then(() => finish);
Czego należy unikać dzięki funkcjom strzałek
1. Nie należy używać funkcji strzałek do tworzenia metod wewnątrz obiektów.
let person = ( name: 'Jack', age: 25, sayName: () => ( // this refers to the global… // console.log(this.age); ) ) person.sayName(); // undefined
2. Nie możesz użyć funkcji strzałki jako konstruktora . Na przykład,
let Foo = () => (); let foo = new Foo(); // TypeError: Foo is not a constructor
Uwaga : Funkcje strzałek zostały wprowadzone w ES6 . Niektóre przeglądarki mogą nie obsługiwać funkcji strzałek. Odwiedź stronę wsparcia JavaScript Arrow Function, aby dowiedzieć się więcej.