Bindning av kontext genom bind-metoden i JavaScript

Nästa metod bind tillåter oss att binda kontexten till en funktion permanent. Denna metod returnerar en ny funktion, inuti vars this kommer att ha ett hårt fastställt värde.

Låt oss titta på ett exempel.

Låt oss säga att vi har en input:

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

Låt oss säga att referensen till denna input är lagrad i variabeln elem:

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

Låt oss säga att vi också har följande funktion func:

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

Låt oss med hjälp av bind skapa en ny funktion som kommer att vara en kopia av funktionen func, men this i den kommer alltid att vara lika med elem:

let newFunc = func.bind(elem);

Nu ligger det en funktion i variabeln newFunc. Låt oss anropa den och skicka in den första parametern '1', och den andra '2' (jag påminner om att i elem ligger en input med value, lika med 'text'):

newFunc('1', '2');

Låt oss sätta ihop allt:

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

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

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

Det är inte nödvändigt att spara resultatet av bind i en ny funktion newFunc, man kan helt enkelt skriva över func. Efter detta kommer func att vara samma funktion som förut, men med hårt bunden this:

func = func.bind(elem);

Antag att följande kod ges:

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

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

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

// skriv konstruktionen med bind() här

func('John', 'Smit'); // här ska det skrivas ut 'hello, John Smit'
func('Eric', 'Luis'); // här ska det skrivas ut 'hello, Eric Luis'

Skriv på den angivna platsen en konstruktion med metoden bind så att this inuti funktionen func alltid pekar på input-fältet från variabeln elem.