Kuidas muuta funktsiooni konteksti JavaScriptis…

JavaScripti funktsiooni täitmise kontekst (this) saab muuta mitmel viisil:

call(): Käivitab funktsiooni määratud this väärtuse ja argumentidega, mis edastatakse eraldi, komaga eraldatult.

// function.call(thisArg, arg1, arg2, ...)
function greet(name) {
  console.log(`Tere, ${name}! Mina olen ${this.type}`);
}

const obj = { type: 'objekt' };

greet.call(obj, 'Alice'); // Tere, Alice! Mina olen objekt

apply(): Käivitab funktsiooni määratud this väärtuse ja argumentidega, mis edastatakse massiivina või sarnases objektis.

// function.apply(thisArg, [argsArray])
function sum(a, b) {
  console.log(`${this.name}: ${a + b}`);
}

const context = { name: 'Kalkulaator' };
const numbers = [5, 10];

sum.apply(context, numbers); // Kalkulaator: 15

bind(): Loob uue funktsiooni, mis on "ühendatud" määratud this väärtusega. Originaalfunktsioon ei käivitu kohe.

// function.bind(thisArg, arg1, arg2, ...)
const user = { name: 'Bob' };

function sayHello() {
  console.log(`Minu nimi on ${this.name}`);
}

const boundSayHello = sayHello.bind(user);

boundSayHello(); // Minu nimi on Bob

Noolefunktsioonid (=>): Noolefunktsioonidel ei ole oma this. Nad haaravad this leksikaalsest keskkonnast (tavaliselt vanemast skoopist, kus need defineeriti).

class MyClass {
  constructor() {
    this.value = 'klassiväärtus';
    // Noolefunktsioon säilitab klassi konteksti
    this.logValue = () => {
      console.log(this.value);
    };
  }
}

const instance = new MyClass();
const method = instance.logValue;

method(); // klassiväärtus (kontekst säilitatud)

// Võrrelge tavalise funktsiooniga ilma bindita
class AnotherClass {
    constructor() {
        this.value = 'teine väärtus';
        this.logValue = function() {
            console.log(this.value); // 'this' on window või strict režiimis undefined
        };
    }
}

const anotherInstance = new AnotherClass();
const anotherMethod = anotherInstance.logValue;

anotherMethod(); // undefined (kontekst kaotatud)

Kuidas muuta funktsiooni konteksti JavaScriptis?