Funkcja strzałki JavaScript
W ES6 wprowadzono funkcje strzałek.
Funkcje strzałkowe pozwalają nam napisać krótszą składnię funkcji:
let myFunction = (a, b) => a * b;
Zanim:
hello = function() {
return "Hello World!";
}
Z funkcją strzałki:
hello = () => {
return "Hello World!";
}
Robi się coraz krócej! Jeśli funkcja ma tylko jedną instrukcję, a instrukcja zwraca wartość, możesz usunąć nawiasy i słowo
return
kluczowe:
Funkcje strzałek domyślnie zwracają wartość:
hello = () => "Hello World!";
Uwaga: Działa to tylko wtedy, gdy funkcja ma tylko jedną instrukcję.
Jeśli masz parametry, przekazujesz je w nawiasach:
Funkcja strzałki z parametrami:
hello = (val) => "Hello " + val;
W rzeczywistości, jeśli masz tylko jeden parametr, możesz również pominąć nawiasy:
Co z this
?
Obsługa this
jest również inna w funkcjach strzałek w porównaniu do zwykłych funkcji.
Krótko mówiąc, z funkcjami strzałek nie ma powiązania
this
.
W zwykłych funkcjach this
słowo kluczowe reprezentowało obiekt, który wywołał funkcję, którym może być okno, dokument, przycisk lub cokolwiek innego.
W przypadku funkcji strzałek this
słowo kluczowe zawsze reprezentuje obiekt, który zdefiniował funkcję strzałki.
Przyjrzyjmy się dwóm przykładom, aby zrozumieć różnicę.
Oba przykłady wywołują metodę dwukrotnie, najpierw podczas wczytywania strony i ponownie, gdy użytkownik kliknie przycisk.
Pierwszy przykład używa zwykłej funkcji, a drugi przykład używa funkcji strzałki.
Wynik pokazuje, że pierwszy przykład zwraca dwa różne obiekty (okno i przycisk), a drugi przykład zwraca dwukrotnie obiekt window, ponieważ obiekt window jest „właścicielem” funkcji.
Przykład
Z regularną funkcją this
reprezentuje obiekt, który wywołuje funkcję:
// Regular Function:
hello = function() {
document.getElementById("demo").innerHTML
+= this;
}
// The window object calls the function:
window.addEventListener("load", hello);
// A button object calls the
function:
document.getElementById("btn").addEventListener("click", hello);
Przykład
Za pomocą funkcji strzałki this
reprezentuje
właściciela funkcji:
// Arrow Function:
hello = () => {
document.getElementById("demo").innerHTML
+= this;
}
// The window object calls the function:
window.addEventListener("load", hello);
// A button object calls the
function:
document.getElementById("btn").addEventListener("click", hello);
Zapamiętaj te różnice podczas pracy z funkcjami. Czasami zachowanie zwykłych funkcji jest tym, czego chcesz, jeśli nie, użyj funkcji strzałek.
Obsługa przeglądarki
Poniższa tabela definiuje pierwsze wersje przeglądarek z pełną obsługą funkcji strzałek w JavaScript:
Chrome 45 | Edge 12 | Firefox 22 | Safari 10 | Opera 32 |
Sep, 2015 | Jul, 2015 | May, 2013 | Sep, 2016 | Sep, 2015 |