JavaScript-те bind әдісі арқылы контекстті байланыстыру

Келесі bind әдісі контекстті функцияға тұрақты түрде байланыстыруға мүмкіндік береді. Бұл әдіс нәтиже ретінде жаңа функцияны қайтарады, оның ішіндегі this қатаң берілген мәнге ие болады.

Мысал арқылы қарастырайық.

Бізде енгізу өрісі болсын:

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

Бұл енгізу өрісіне сілтеме elem айнымалысына жазылған болсын:

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

Сондай-ақ бізде келесі func функциясы болсын:

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

bind көмегімен func функциясының көшірмесі болатын жаңа функция жасайық, бірақ ондағы this әрқашан elem тең болады:

let newFunc = func.bind(elem);

Енді newFunc айнымалысында функция бар. Оны шақырайық, бірінші параметрге '1', ал екіншісіне '2' беріп (есске сала кетейін, elem-де value мәні 'text' тең болатын енгізу өрісі бар):

newFunc('1', '2');

Барлығын біріктірейік:

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

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

let newFunc = func.bind(elem);
newFunc('1', '2'); // шығарады 'text12'

bind жұмысының нәтижесін міндетті түрде жаңа newFunc функциясына жазудың қажеті жоқ, жай func қайта жазуға болады. Осы әрекеттен кейін func бұрынғыдай функция болады, бірақ this қатаң байланысқан болады:

func = func.bind(elem);

Келесі код берілген делік:

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

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

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

// мұнда bind() әдісі бар конструкцияны жазыңыз

func('John', 'Smit'); // мұнда 'hello, John Smit' шығаруы керек
func('Eric', 'Luis'); // мұнда 'hello, Eric Luis' шығаруы керек

Көрсетілген жерде bind әдісі бар конструкцияны жазыңыз, сонда func функциясы ішіндегі this әрқашан elem айнымалысынан алынған енгізу өрісін көрсетеді.