JavaScript да bind методи орқали контекстни боглаш

Кейинги метод bind функцияга контекстни мангу боглаш имкони беради. Ушбу метод ўз натижасида янги функцияни қайтаради, унинг ичида this қаттик белгиланган қийматга эга бўлади.

Келгила, мисолда кўрамиз.

Фарз қилайлик, бизда инпут мавжуд:

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

Фарз қилайлик, ушбу инпутга ҳавола elem ўзгарувчисига ёзилган:

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

Фарз қилайлик, бизда куйидаги функция func ҳам мавжуд:

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

Келгила, bind ёрдамида func функциясининг нусхаси бўлган янги функция ясайлик, лекин унда this ҳар доим elem га тенг бўлади:

javascriptlet newFunc = func.bind(elem);

Энди newFunc ўзгарувчисида функция ётади. Келгила уни чақирейлик, биринчи параметрга '1', иккинчига '2' узатиб (эслатма, elem да 'text' га тенг value бўлган инпут ётади):

javascriptnewFunc('1', '2');

Келгила, ҳаммасини бир жойга тўплаймиз:

javascriptlet 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 қаттик богланиб бўлади:

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

// бу ерда bind() билан конструкция ёзинг

func('John', 'Smit'); // бу ерда 'hello, John Smit' чиқиши керак
func('Eric', 'Luis'); // бу ерда 'hello, Eric Luis' чиқиши керак