Co je to kontext ve funkci?

Kontext (this) ve funkci JavaScript je definován tím, jak byl funkce volána, nikoliv tím, kde byla deklarována. Ukazuje na objekt, kterému funkce patří nebo který volá.

Způsoby určení kontextu:

1. Globální kontext: Mimo funkce, nebo pokud je funkce volána bez explicitního objektu (this bude odkazovat na globální objekt window v prohlížeči, global v Node.js, nebo undefined v režimu strict).

   // V prohlížeči
   console.log(this === window); // true
   
   function showContext() {
     console.log(this);
   }
   
   showContext(); // window
   

2. Kontext objektu (metoda): Pokud je funkce volána jako metoda objektu (obj.method()), this uvnitř funkce odkazuje na tento objekt.

   const user = {
     jméno: 'Alice',
     pozdrav: function() {
       console.log(`Ahoj, jmenuji se ${this.jméno}`);
     }
   };
   
   user.pozdrav(); // Ahoj, jmenuji se Alice
   

3. Konstruktorový kontext: Při volání funkce s klíčovým slovem new (new MyClass()), je vytvořen nový objekt a this uvnitř konstruktoru odkazuje na tento nový objekt.

   function Person(jméno) {
     this.jméno = jméno;
   }
   
   const osoba1 = new Person('Bob');
   console.log(osoba1.jméno); // Bob
   

4. Explicitní určení kontextu: Metody call, apply a bind umožňují explicitně nastavit hodnotu this při volání funkce.

   • call(thisArg, arg1, arg2, ...): Volá funkci s daným this a argumenty předanými jednotlivě.
   • apply(thisArg, [argsArray]): Volá funkci s daným this a argumenty předanými jako pole.
   • bind(thisArg, arg1, arg2, ...): Vrací novou funkci, kde je this pevně nastaven na danou hodnotu.

   function displayInfo(age) {
     console.log(`${this.jméno} je ${age} let.`);
   }
   
   const osoba = { jméno: 'Charlie' };
   
   displayInfo.call(osoba, 30); // Charlie je 30 let.
   displayInfo.apply(osoba, [35]); // Charlie je 35 let.
   
   const pevněNastavenáDisplayInfo = displayInfo.bind(osoba, 40);
   pevněNastavenáDisplayInfo(); // Charlie je 40 let.
   

5. Šipkové funkce: Šipkové funkce nemají vlastní this. Dědí this z lexikálního prostředí (okolí, kde byly definovány).

   const anotherUser = {
     jméno: 'David',
     sayHello: function() {
       const innerArrow = () => {
         console.log(`Ahoj ze šipky, ${this.jméno}`);
       };
       innerArrow(); // `this` zde je anotherUser, dědí se z sayHello
     },
     sayHelloBad: () => { // špatná praxe pro metody objektu
         console.log(`Ahoj ze šipky, ${this.jméno}`);
     }
   };
   
   anotherUser.sayHello(); // Ahoj ze šipky, David
   
   // V prohlížeči, mimo strict režim
   anotherUser.sayHelloBad(); // Ahoj ze šipky, undefined (this je window)
   

Porozumění kontextu je klíčové pro správnou práci s objekty, metodami a událostmi v JavaScriptu.