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

Шунинг учун, биз this ҳақиқатан ҳам қандай ишлашини тушундирдик. Келинг энди функция қай контекстда чақирилишини мажбуран кўрсатиш имконини берувчи методларни кўриб чиқайлик (яъни мажбуран this нимага тенг эканлигини айтиш).

Биз кўриб чиқадиган биринчи метод call деб аталади. Келинг унинг ишлашини мисолда кўрамиз. Бизда инпут бор деб фараз қилайлик:

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

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

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

Келинг энди func функциясини ясайлик, унинг ичида this.value ни чиқарайлик:

function func() {
	console.log(this.value);
}

Ҳозирча бизнинг функция this нимага ишора қилаёганини билмайди. Агар биз уни addEventListener орқали боглаганда буни билар эди. Лекин биз бундай қилмаймиз. Бунги ўрнига биз функцияни чақириб, унига this elem га тенг деб айтамиз.

Бу шундай қилинади: func.call(elem). Бу код оддий func() функция чақирувга тенг, фақат this elem га тенг бўлган шарт билан.

Шунинг учун, call методининг синтаксиси шундай: функция.call(объект). Келинг ҳаммасини бирга ясайлик:

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

function func() {
	console.log(this.value); // инпутнинг value сини чиқаради
}
func.call(elem);

Функция берилган:

function func() {
	console.log(this.value);
}

Учта инпут берилган:

<input id="elem1" value="text1">
<input id="elem2" value="text2">
<input id="elem3" value="text3">

call методи ва func функцияси ёрдамида ҳар бир инпутнинг value сини экранга чиқаринг.