Reaguj Funkcje strzałek ES6

Funkcje strzałek

Funkcje strzałkowe pozwalają nam napisać krótszą składnię funkcji:

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

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 returnkluczowe:

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

Jeśli masz parametry, przekazujesz je w nawiasach:

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

W rzeczywistości, jeśli masz tylko jeden parametr, możesz również pominąć nawiasy:

hello = val => "Hello " + val;

Co z this?

Obsługa thisjest 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 thissł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 thissł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 Header.

class Header {
  constructor() {
    this.color = "Red";
  }

//Regular function:
  changeColor = function() {
    document.getElementById("demo").innerHTML += this;
  }
}

const myheader = new Header();

//The window object calls the function:
window.addEventListener("load", myheader.changeColor);

//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);

class Header {
  constructor() {
    this.color = "Red";
  }

//Arrow function:
  changeColor = () => {
    document.getElementById("demo").innerHTML += this;
  }
}

const myheader = new Header();


//The window object calls the function:
window.addEventListener("load", myheader.changeColor);

//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);

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.

hello =  "Hello World!";