Funkcje strzałkowe w JavaScript

Funkcje strzałkowe zostały wprowadzone w ES6.

Funkcje strzałkowe pozwalają nam pisać krótsze funkcje:

Gramatyka

let myFunction = (a, b) => a * b;

Spróbuj sam

Poprzednio:

hello = function() {
  return "Hello World!";
}

Spróbuj sam

Po użyciu funkcji strzałkowej:

hello = () => {
  return "Hello World!";
}

Spróbuj sam

Dokładnie się skróciło! Jeśli funkcja ma tylko jedno polecenie, które zwraca wartość, można usunąć nawiasy i return Kluczowe słowo:

Domyślny zwracany wartość funkcji strzałkowej:

hello = () => "Hello World!";

Spróbuj sam

Komentarz:To działa tylko wtedy, gdy funkcja ma tylko jedno polecenie.

Jeśli masz parametry, przekazuj je do nawiasów:

Funkcja strzałkowa z parametrami:

hello = (val) => "Hello " + val;

Spróbuj sam

W rzeczywistości, jeśli ma tylko jeden parametr, możesz pominąć nawiasy:

Funkcja strzałkowa bez nawiasów:

hello = val => "Hello " + val;

Spróbuj sam

to Co robić?

W porównaniu do zwykłych funkcji, funkcje strzałkowe mają to obsługę także się różni.

Krótko mówiąc, używanie funkcji strzałkowych nie wpływa na to jest wiązane.

W zwykłych funkcjach, kluczowe słowo to oznacza obiekt wywołujący funkcję, może to być okno, dokument, przycisk lub cokolwiek innego.

Dla funkcji strzałkowych,to Kluczowe słowo zawsze oznacza obiekt definiujący funkcję strzałkową.

Zobaczmy dwa przykłady, aby zrozumieć różnice.

Oba przykłady wywołały metodę dwa razy, raz przy ładowaniu strony, drugi raz przy kliknięciu przycisku.

Pierwszy przykład używa zwykłej funkcji, drugi przykład używa funkcji strzałkowej.

Wynik pokazuje, że w pierwszym przykładzie zwrócono dwa różne obiekty (window i button), podczas gdy w drugim przykładzie zwrócono dwa razy obiekt window, ponieważ obiekt window jest "właścicielem" funkcji.

przykład

Dla zwykłych funkcji, kluczowe słowo this oznacza obiekt wywołujący funkcję:

// Zwykła funkcja:
hello = function() {
  document.getElementById("demo").innerHTML += this;
}
// Wywołanie funkcji przez obiekt okna:
window.addEventListener("load", hello);
// Wywołanie funkcji przez obiekt przycisku:
document.getElementById("btn").addEventListener("click", hello);

Spróbuj sam

przykład

używając funkcji strzałkowych, to to Wyznaczającego właściciela funkcji:

// Funkcja strzałkowa:
hello = () => {
  document.getElementById("demo").innerHTML += this;
}
// Wywołanie funkcji przez obiekt okna:
window.addEventListener("load", hello);
// Wywołanie funkcji przez obiekt przycisku:
document.getElementById("btn").addEventListener("click", hello);

Spróbuj sam

Pamiętaj o tych różnicach podczas używania funkcji. Czasami zachowanie zwyczajnej funkcji jest dokładnie tym, czego potrzebujesz, a jeśli nie, użyj funkcji strzałkowych.

Wsparcie przeglądarek

Poniższa tabela pokazuje pierwsze wersje przeglądarek, które w pełni obsługiwały funkcje strzałkowe JavaScript:

Chrome IE Firefox Safari Opera
Chrome 45 Edge 12 Firefox 22 Safari 10 Opera 32
Wrzesień 2015 Lipiec 2015 Maj 2013 Wrzesień 2016 Wrzesień 2015