Od czego zależy wartość kontekstu wykonania `this` w JavaScript?

Wartość this w JavaScript zależy od sposobu wywołania funkcji. Główne scenariusze:

1. Kontekst globalny: Poza funkcjami, w trybie ścisłym ('use strict') this jest undefined. Bez trybu ścisłego, jest to obiekt globalny (window w przeglądarce, global w Node.js).

2. Wywołanie metody obiektu: this wskazuje na obiekt, do którego należy wywoływana metoda.

   const obj = {
     prop: 'wartość',
     method: function() {
       // this === obj
       console.log(this.prop);
     }
   };
   obj.method();
   

3. Normalne wywołanie funkcji: W trybie ścisłym this jest undefined. Bez trybu ścisłego, jest to obiekt globalny.

   function myFunction() {
     // w trybie ścisłym this === undefined
     // bez trybu ścisłego this === window (w przeglądarce)
     console.log(this);
   }
   myFunction();
   

4. Konstruktor (new): Przy użyciu operatora new z funkcją konstruktora, this wewnątrz funkcji odnosi się do nowo tworzonego obiektu.

   function MyClass(name) {
     this.name = name; // this === nowy obiekt
   }
   const instance = new MyClass('test');
   // instance.name === 'test'
   

5. Wyraźne powiązanie (call, apply, bind): Metody call, apply i bind pozwalają jawnie ustawić wartość this dla funkcji.

   • call(thisArg, arg1, arg2, ...): Wywołuje funkcję, ustawiając this na thisArg i przekazując argumenty pojedynczo.
   • apply(thisArg, [argsArray]): Wywołuje funkcję, ustawiając this na thisArg i przekazując argumenty jako tablicę.
   • bind(thisArg): Zwraca nową funkcję z na stałe powiązanym this.

   const anotherObj = { value: 42 };
   function showValue() {
     console.log(this.value);
   }
   showValue.call(anotherObj); // Wypisze 42
   

6. Funkcje strzałkowe (=>): Funkcje strzałkowe nie mają własnego this. Wartość this wewnątrz funkcji strzałkowej dziedziczy z leksykalnego kontekstu, w którym została zdefiniowana.

   const outerObj = {
     name: 'Outer',
     method: function() {
       const arrowFunc = () => {
         // this dziedziczy z method, wywoływanej jako metoda outerObj
         console.log(this.name);
       };
       arrowFunc();
     }
   };
   outerObj.method(); // Wypisze 'Outer'
   
   const anotherArrowFunc = () => {
       // this dziedziczy z kontekstu globalnego (lub undefined w trybie ścisłym)
       console.log(this);
   };
   anotherArrowFunc();
   

7. Obsługa zdarzeń DOM: W większości przypadków, this w obsłudze zdarzenia odnosi się do elementu DOM, na którym wystąpiło zdarzenie.

   // Przykład w przeglądarce
   const button = document.querySelector('button');
   button.addEventListener('click', function() {
     // this === button
     console.log(this.tagName);
   });
   

Zrozumienie tych mechanizmów jest kluczowe dla poprawnego użycia this w JavaScript.