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:

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

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

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

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

javascriptfunction 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:

javascriptlet 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):

javascriptnewFunc('1', '2');

Geliň hemmesini bilelikde jemleýäliň:

javascriptlet 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:

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);
}

// 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