Kontekstin sitominen bind-metodilla JavaScriptissä

Seuraava metodi bind mahdollistaa kontekstin pysyvän sitomisen funktioon. Tämä metodi palauttaa uuden funktion, jossa this on tiukasti asetettu arvo.

Katsotaanpa esimerkkiä.

Oletetaan, että meillä on syötekenttä:

html<input id="elem" value="text">

Oletetaan, että linkki tähän syötekenttään on tallennettu muuttujaan elem:

javascriptlet elem = document.querySelector('#elem');

Oletetaan myös, että meillä on seuraava funktio func:

javascriptfunction func(param1, param2) {
  console.log(this.value + param1 + param2);
}

Tehdään bind:n avulla uusi funktio, joka on kopio funktiosta func, mutta this siinä on aina yhtä kuin elem:

javascriptlet newFunc = func.bind(elem);

Nyt muuttujassa newFunc on funktio. Kutsutaan sitä välittämällä ensimmäiseen parametriin '1' ja toiseen '2' (muistutan, että elem sisältää syötekentän, jonka value on 'text'):

javascriptnewFunc('1', '2');

Kootaan kaikki yhteen:

javascriptlet elem = document.getElementById('elem');

function func(param1, param2) {
  console.log(this.value + param1 + param2);
}

let newFunc = func.bind(elem);
newFunc('1', '2'); // tulostaa 'text12'

Ei ole välttämätöntä tallentaa bind:in tulosta uuteen funktioon newFunc, voi yksinkertaisesti korvata func. Sen jälkeen func on sama funktio kuin ennen, mutta tiukasti sidottu this:

javascriptfunc = func.bind(elem);

html<input id="elem" value="hello">

javascriptlet elem = document.getElementById('elem');

function func(name, surname) {
  console.log(this.value + ', ' + name + ' ' + surname);
}

// kirjoita tähän rakenne bind():lla

func('John', 'Smit'); // tänne pitäisi tulostua 'hello, John Smit'
func('Eric', 'Luis'); // tänne pitäisi tulostua 'hello, Eric Luis'