JavaScriptda bind metodi orqali kontekstni bog‘lash

Quyidagi bind metodi kontekstni funktsiyaga doimiy ravishda bog‘lash imkonini beradi. Ushbu metod o‘z natijasida yangi funktsiyani qaytaradi, uning ichida this qattiq belgilangan qiymatga ega bo‘ladi.

Keling, misol orqali ko'rib chiqaylik.

Faraz qilaylik, bizda kirish maydoni mavjud:

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

Faraz qilaylik, ushbu kirish maydoniga havola elem o‘zgaruvchisiga yozilgan:

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

Faraz qilaylik, bizda quyidagi func funktsiyasi ham mavjud:

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

Keling, bind yordamida func funktsiyasining nusxasi bo‘lgan yangi funktsiya yarataylik, lekin unda this har doim elem ga teng bo‘ladi:

let newFunc = func.bind(elem);

Endi newFunc o‘zgaruvchisida funktsiya yotadi. Keling uni chaqiraylik, birinchi parametrga '1', ikkinchisiga esa '2' berib (eslatma: elem da qiymati 'text' ga teng bo‘lgan kirish maydoni mavjud):

newFunc('1', '2');

Keling hammasini birlashtiramiz:

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

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

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

bind ishlash natijasini yangi newFunc funktsiyasiga yozish shart emas, shunchaki func ni qayta yozish mumkin. Shundan so‘ng func avvalgidek funktsiya bo‘lib qoladi, lekin this qattiq bog‘langan bo‘ladi:

func = func.bind(elem);

Faraz qilaylik, quyidagi kod berilgan:

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

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

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

// bu yerda bind() bilan konstruktsiya yozing

func('John', 'Smit'); // bu yerda 'hello, John Smit' chiqishi kerak
func('Eric', 'Luis'); // bu yerda 'hello, Eric Luis' chiqishi kerak

Ko‘rsatilgan joyda bind metodi bilan konstruktsiya yozing, shunda func funktsiyasi ichidagi this har doim elem o‘zgaruvchisidagi kirish maydoniga ishora qilsin.