V čom sa šípové funkcie líšia od bežných funkcií z…

Šipkové funkcie nemajú vlastný kontext this. Zachytávajú this z okolia (lexikálneho prostredia).

Obvyklé funkcie definujú svoj this v závislosti od spôsobu volania:

V globálnom kontexte (window alebo global).
Ako metóda objektu (this ukazuje na objekt).
Ako konštruktor (this ukazuje na novú inštanciu).
Použitím call, apply alebo bind (this je nastavené explicitne).

Pretože šipkové funkcie nemajú vlastný this, volanie bind na šipkovú funkciu nemá zmysel a nezmení leksikálne viazaný this. Ak sa pokúsite volať bind na šipkovej funkcii, jednoducho bude vrátená sama.

Príklad:

// Normálna funkcia
const normalFunc = function() {
  console.log(this.name);
};

const obj1 = { name: 'Objekt 1', method: normalFunc };
const obj2 = { name: 'Objekt 2' };

obj1.method(); // Výstup: Objekt 1

const boundFunc = normalFunc.bind(obj2);
boundFunc(); // Výstup: Objekt 2 (this bol úspešne zmenený)

// Šipková funkcia
const arrowFunc = () => {
  console.log(this.name);
};

const obj3 = { name: 'Objekt 3' };

// ArrowFunc zachytáva `this` z okolia (v tomto prípade, globálny objekt)
arrowFunc(); // Výstup: undefined (pravdepodobne, pretože `this` neobsahuje `name`)

const boundArrowFunc = arrowFunc.bind(obj3);
boundArrowFunc(); // Výstup: undefined (`this` sa nezmenil, bind nemal efekt)

// Príklad so zachytením `this`
const person = {
  name: 'Alžbeta',
  greet: function() {
    // Tu, `this` ukazuje na `person`
    const greetLater = () => {
      // Tu, `this` je zachytené z vonkajšieho kontextu `greet`, teda tiež na `person`
      console.log(`Ahoj, ${this.name}!`);
    };
    greetLater();
  }
};

person.greet(); // Výstup: Ahoj, Alžbeta!

Zhrnutie: metóda bind je potrebná pre normálne funkcie, aby explicitne nastavila ich kontext this, zatiaľ čo pre šipkové funkcie je nadbytočná, pretože ich this je určené lexikálne a nemôže byť zmenené pomocou bind.

V čom sa šípové funkcie líšia od bežných funkcií z hľadiska potreby použitia metódy bind?