Jaka jest różnica między funkcją klasyczną a funkcją strzałkową w JavaScript?

Główna różnica polega na tym, jak działają z this.

Funkcja klasyczna ma własne this, które jest określane przez kontekst, w którym jest wywoływana (jak została wywołana).

Funkcja strzałkowa nie ma własnego this. Dziedziczy this leksykalnie z otoczenia, w którym została zdefiniowana.

Inne różnice:

• Obiekt arguments: Funkcje klasyczne mają dostęp do obiektu arguments, funkcje strzałkowe nie (ale można używać parametrów rest).
• Konstruktory: Funkcje klasyczne mogą być używane jako konstruktory z operatorem new. Funkcje strzałkowe nie.
• Właściwość prototype: Funkcje klasyczne mają własność prototype. Funkcje strzałkowe nie.

Przykład pracy z this:

// Przykład z funkcją klasyczną
const obj = {
  name: 'Obiekt',
  greet: function() {
    console.log(this.name); // this odnosi się do obj
  }
};

obj.greet(); // Wyświetli: Obiekt

const greetFunc = obj.greet;
greetFunc(); // Wyświetli: undefined (lub Window w przeglądarce) - this traci kontekst obiektu

// Przykład z funkcją strzałkową
const objArrow = {
  name: 'Obiekt ze strzałką',
  greet: () => {
    console.log(this.name); // this dziedziczy kontekst z zewnątrz (w tym przypadku globalny lub Window)
  }
};

objArrow.greet(); // Wyświetli: undefined (lub nazwę okna w przeglądarce, jeśli name jest zdefiniowane globalnie)

const greetArrowFunc = objArrow.greet;
greetArrowFunc(); // Wyświetli: undefined (lub nazwę okna w przeglądarce) - this się nie zmienia