JavaScript-de bind metodi arkaly konteksti çäkmek

Indiki metod bind funksiýa bilen konteksti hemişelik çäkmäge mümkinçilik berýär. Bu metodiň netijesi ýaňy bir funksiýa bolup, onuň içinde this berk kesgitlenen baha bolýar.

Geliň mysalda göreliň.

Bizde input bolsun:

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

Bu inputa çykgyt üýtgeýjide elem ýazylan bolsun:

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

Bizde şeýle funksiýa func hem bolsun:

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

bind ulanyp, func funksiýasynyň nusgasynyň ýaňysyny ýasalyň, ýöne onuň içindäki this hemişe elem deň bolsun:

let newFunc = func.bind(elem);

Indi newFunc üýtgeýjisinde funksiýa bar. Geliň ony çagyryň, birinji parametre hökmünde '1', ikinjisinde bolsa '2' beriň (ýatladýarys, elem üýtgeýjisinde value-sy 'text' deň bolan input bar):

newFunc('1', '2');

Geliň hemmesini bilelikde jemleýäliň:

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

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

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

bind işiniň netijesini hökmany newFunc ýaňy funksiýada ýazmaly däldir, diňe func üýtgedip bileris. Ondan soň func öňkisi ýaly funksiýa bolar, ýöne this birikdirilen bolýar:

func = func.bind(elem);

Aşakdaky kod berlen bolsun:

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

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

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

// bu ýere bind() metodi bilen gurluşy ýazyň

func('John', 'Smit'); // bu ýerde 'hello, John Smit' çykmagy gerek
func('Eric', 'Luis'); // bu ýerde 'hello, Eric Luis' çykmagy gerek

Görkezilen ýerde bind metodi bilen gurluşy şeýle ýazyň, func funksiýasynyň içindäki this üýtgeýjiden gelen inputa görkezmeli.