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 да 'text' га тенг value бўлган инпут ётади):

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 ўзгарувчисидаги инпутга ишора қилсин.