Kaip pakeisti funkcijos kontekstą JavaScript…

JavaScript'e funkcijos vykdymo kontekstas (this reikšmė) gali būti pakeistas keliais būdais:

call(): Vykdo funkciją su nurodyta this reikšme ir argumentais, perduodamais atskirai, kableliu atskirtai.

// function.call(thisArg, arg1, arg2, ...)
function greet(name) {
  console.log(`Sveiki, ${name}! Aš esu ${this.type}`);
}

const obj = { type: 'objektas' };

greet.call(obj, 'Alisa'); // Sveiki, Alisa! Aš esu objektas

apply(): Vykdo funkciją su nurodyta this reikšme ir argumentais, perduodamais kaip masyvas arba panašus į masyvą objektas.

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

const context = { name: 'Skaičiuotuvas' };
const numbers = [5, 10];

sum.apply(context, numbers); // Skaičiuotuvas: 15

bind(): Sukuria naują funkciją, "pririštą" prie nurodyto this reikšmės. Originali funkcija neįvykdomas iš karto.

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

function sayHello() {
  console.log(`Mano vardas ${this.name}`);
}

const boundSayHello = sayHello.bind(user);

boundSayHello(); // Mano vardas Bob

Strėlinės funkcijos (=>): Strėlinės funkcijos neturi savo this. Jos paima this iš leksinio aplinkos (iš įprasto tėvų scope, kur jos buvo apibrėžtos).

class MyClass {
  constructor() {
    this.value = 'klasės reikšmė';
    // Strėlinė funkcija išsaugo klasės kontekstą
    this.logValue = () => {
      console.log(this.value);
    };
  }
}

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

method(); // klasės reikšmė (kontekstas išsaugotas)

// Palyginkite su įprasta funkcija be bind
class AnotherClass {
    constructor() {
        this.value = 'kitos reikšmės';
        this.logValue = function() {
            console.log(this.value); // 'this' bus window arba undefined strict režime
        };
    }
}

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

anotherMethod(); // undefined (kontekstas prarastas)

Kaip pakeisti funkcijos kontekstą JavaScript?