Opowiedz o kontekście funkcji w JavaScript.

Kontekst wykonania funkcji (this) w JavaScript określa, jak funkcja jest wywoływana i jakie wartości są dostępne wewnątrz niej. Kontekst dynamicznie zmienia się w zależności od sposobu wywołania:

• Kontekst globalny: Poza funkcjami, this odnosi się do obiektu globalnego (window w przeglądarce, global w Node.js).

  // W przeglądarce
  console.log(this === window); // true
  
  // W Node.js
  console.log(this === global); // true
  

• Kontekst funkcji:
  • Standardowe wywołanie: W trybie nie-ścisłym, this wewnątrz funkcji odnosi się do obiektu globalnego (jeśli funkcja nie jest metodą obiektu). W trybie ścisłym ("use strict";) this będzie undefined.

    function showThis() {
      console.log(this);
    }
    
    showThis(); // W trybie nie-ścisłym: Obiekt globalny; W trybie ścisłym: undefined
    

  • Wywołanie jako metoda obiektu: this odnosi się do obiektu, do którego należy metoda.

    const user = {
      name: 'Alice',
      greet: function() {
        console.log("Cześć, nazywam się " + this.name);
      }
    };
    
    user.greet(); // Cześć, nazywam się Alice
    

  • Przy użyciu new (konstruktor): Tworzy nowy obiekt, który staje się wartością this wewnątrz funkcji konstruktora, i zwraca ten obiekt.

    function Person(name) {
      this.name = name;
    }
    
    const person1 = new Person('Bob');
    console.log(person1.name); // Bob
    

  • Jawne określenie kontekstu (call, apply, bind):
    • call(thisArg, arg1, arg2, ...): Wywołuje funkcję z określonym this i argumentami wymienionymi osobno.
    • apply(thisArg, [argsArray]): Wywołuje funkcję z określonym this i argumentami w tablicy.
    • bind(thisArg, arg1, arg2, ...): Zwraca nową funkcję, której this jest na stałe przypisane do thisArg, a argumenty są wstępnie powiązane.

    function introduce(greeting, punctuation) {
      console.log(greeting + ", jestem " + this.name + punctuation);
    }
    
    const person = { name: 'Charlie' };
    
    introduce.call(person, "Cześć", "!");  // Cześć, jestem Charlie!
    introduce.apply(person, ["Witaj", "."]); // Witaj, jestem Charlie.
    
    const boundIntroduce = introduce.bind(person, "Hej");
    boundIntroduce("?"); // Hej, jestem Charlie?
    

• Funkcje strzałkowe: Nie mają własnego kontekstu this. przechwytują this z otaczającego zakresu leksykalnego, w którym zostały zdefiniowane.

  const obj = {
    name: 'David',
    sayLater: function() {
      // `this` tutaj odnosi się do `obj`
      setTimeout(() => {
        // `this` tutaj również odnosi się do `obj` (odziedziczone z `sayLater`)
        console.log("Później, jestem " + this.name);
      }, 1000);
    }
  };
  
  obj.sayLater(); // Później, jestem David