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:

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

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

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

Faraz qilaylik, bizda quyidagi func funktsiyasi ham mavjud:

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

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

javascriptnewFunc('1', '2');

Keling hammasini birlashtiramiz:

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

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