Millele sõltub `this` täitmise konteksti väärtus…

JavaScriptis sõltub this väärtus funktsiooni kutsumise viisist. Peamised stsenaariumid:

Globaalkontekst: Funktsioonide väliselt, range režiimis ('use strict') on this undefined. Ilma range režiimita — globaalne objekt (window brauseris, global Node.js-is).

Objekti meetodi kutsumine: this viitab objekti, millele meetod kuulub, sellele objekti.

const obj = {
  prop: 'väärtus',
  method: function() {
    // this === obj
    console.log(this.prop);
  }
};
obj.method();

Tavaline funktsiooni kutsumine: Range režiimis on this undefined. Ilma range režiimita — globaalne objekt.

function myFunction() {
  // range režiimis this === undefined
  // ilma range režiimita this === window (brauseris)
  console.log(this);
}
myFunction();

Konstruktor (new): new-iga kutsumisel viitab this uuele loodud objekti.

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

Selge sidumine (call, apply, bind): Need meetodid võimaldavad funktsioonile selgelt määrata this väärtuse.
- call(thisArg, arg1, arg2, ...): kutsub funktsiooni, määrates this-ks thisArg ja argumendid eraldi.
- apply(thisArg, [argsArray]): kutsub funktsiooni, määrates this-ks thisArg ja argumendid massiivina.
- bind(thisArg): tagastab uue funktsiooni, millel on fikseeritud this väärtus.
```
const anotherObj = { value: 42 };
function showValue() {
  console.log(this.value);
}
showValue.call(anotherObj); // Väljund: 42
```

Noolefunktsioonid (=>): Noolefunktsioonidel ei ole oma this. this väärtus pärandub leksikaalsest kontekstist, kus see defineeriti.

const outerObj = {
  name: 'Väline',
  method: function() {
    const arrowFunc = () => {
      // this pärandub outerObj `method`-ist
      console.log(this.name);
    };
    arrowFunc();
  }
};
outerObj.method(); // Väljund: 'Väline'

const anotherArrowFunc = () => {
    // this pärandub globaalsetest kontekstist (või `undefined` range režiimis)
    console.log(this);
};
anotherArrowFunc();

DOM-i sündmuse käsitlejad: Enamasti viitab this sündmuse käsitlejas DOM-elementile, millel sündmus toimus.

// Näide brauseris
const button = document.querySelector('button');
button.addEventListener('click', function() {
  // this === button
  console.log(this.tagName);
});

Nende mehhanismide mõistmine on kriitiline this õige kasutamise jaoks JavaScriptis.

Millele sõltub `this` täitmise konteksti väärtus JavaScriptis?