Skąd pochodzi kontekst funkcji w JavaScript?

Kontekst wykonania (lub this) w JavaScript jest określany w momencie wywołania funkcji, a nie w momencie jej deklaracji. Na jego wartość wpływają następujące czynniki:

Kontekst globalny: Poza funkcjami, this odnosi się do obiektu globalnego (w przeglądarce window, w Node.js global). W trybie ścisłym ('use strict') this w tym przypadku będzie undefined.
```
// W przeglądarce
console.log(this); // window

// W Node.js
console.log(this); // global
```
Wywołanie metody obiektu: Jeśli funkcja jest wywoływana jako metoda obiektu (przez kropkę), this odnosi się do tego obiektu.
```
const obj = {
  name: 'Obj',
  method: function() {
    console.log(this.name);
  }
};
obj.method(); // Obj
```
"Zwykłe" wywołanie funkcji: Przy prostym wywołaniu funkcji (nie jako metoda), this w trybie nieścisłym odnosi się do obiektu globalnego. W trybie ścisłym this będzie undefined.
```
function greet() {
  console.log(this);
}
greet(); // window (w trybie nieścisłym) lub undefined (w trybie ścisłym)
```
Konstruktor (z new): Gdy funkcja jest wywoływana z słowem kluczowym new, działa jako konstruktor. this wewnątrz funkcji odnosi się do nowo utworzonego obiektu.
```
function Person(name) {
  this.name = name;
}
const person1 = new Person('Alice');
console.log(person1.name); // Alice
```
Metody call, apply, bind: Te metody jawnie pozwalają ustawić wartość this dla funkcji.
- call i apply wywołują funkcję natychmiast, przekazując this jako pierwszy argument. call przyjmuje pozostałe argumenty pojedynczo, a apply w formie tablicy.
- bind zwraca nową funkcję, której wartość this jest "związana" na stałe z przekazanym pierwszym argumentem.
```
const anotherObj = { name: 'Another Obj' };

function displayContext() {
  console.log(this.name);
}

displayContext.call(anotherObj); // Another Obj
displayContext.apply(anotherObj); // Another Obj

const boundFunction = displayContext.bind(anotherObj);
boundFunction(); // Another Obj
```

Funkcje strzałkowe: Funkcje strzałkowe nie mają własnego this. "Przechwytują" wartość this z otoczenia leksykalnego, w którym zostały zadeklarowane. To czyni je przydatnymi do callbacków wewnątrz metod lub przy pracy z zdarzeniami DOM.

const objWithArrow = {
  name: 'Arrow Obj',
  method() {
    const arrowFunc = () => {
      console.log(this.name); // `this` jest brane z `method` (objWithArrow)
    };
    arrowFunc();
  }
};
objWithArrow.method(); // Arrow Obj

// Porównanie z funkcją zwykłą
const objWithRegular = {
  name: 'Regular Obj',
  method() {
    const regularFunc = function() {
      console.log(this); // `this` będzie window lub undefined (w trybie ścisłym) przy wywołaniu w tym kontekście
    };
    regularFunc();
  }
};
objWithRegular.method(); // window (lub undefined)

Definicja kontekstu jest jednym z kluczowych elementów JavaScript, a zrozumienie tych reguł jest istotne dla poprawnej pracy z funkcjami i obiektami.