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-сын экранға шығарыңыз.