Aký je rozdiel medzi klasickou funkciou a šípkovou funkciou v JavaScripte?

Hlavný rozdiel spočíva v tom, ako pracujú s this.

Klasická funkcia má svoj this, ktorý je určený kontextom jej volania (ako bola volaná).

Štvorcová funkcia nemá svoj this. Dedí this lexicky z prostredia, v ktorom bola definovaná.

Ďalšie rozdiely:

• arguments objekt: Klasické funkcie majú prístup k objektu arguments, šípové — nie (ale môžete použiť rest-parametre).
• Konštruktory: Klasické funkcie môžu byť použité ako konštruktory s operátorom new. Šípové funkcie — nie.
• prototype vlastnosť: Klasické funkcie majú vlastnosť prototype. Šípové — nie.

Príklad práce s this:

// Príklad s klasickou funkciou
const obj = {
  name: 'Objekt',
  greet: function() {
    console.log(this.name); // this odkazuje na obj
  }
};

obj.greet(); // Vypíše: Objekt

const greetFunc = obj.greet;
greetFunc(); // Vypíše: undefined (alebo Window v prehliadači) - this stráca kontext obj

// Príklad so šípkovou funkciou
const objArrow = {
  name: 'Objekt so šípkou',
  greet: () => {
    console.log(this.name); // this dedí kontext zvonku (v tomto prípade global alebo Window)
  }
};

objArrow.greet(); // Vypíše: undefined (alebo Meno okna v prehliadači, ak je name definované na globálnej úrovni)

const greetArrowFunc = objArrow.greet;
greetArrowFunc(); // Vypíše: undefined (alebo Meno okna v prehliadači) - this sa nemení