Funkcja strzałki JavaScript

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 funkcji
  • arg1, arg2,… argN są argumentami funkcji
  • statement(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 thisnie 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.agewnętrze this.sayName()jest dostępne, ponieważ this.sayName()jest metodą obiektu.

Jednakże, innerFunc()jest to normalne działanie i this.agenie jest dostępny, ponieważ thisodnosi się do globalnego obiektu (obiekt okna w przeglądarce). Stąd this.agewewną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 thisodnosi się do zakresu rodzica. Stąd this.agedaje 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ą argumentssł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.

Interesujące artykuły...