JavaScript-ում call մեթոդի միջոցով կոնտեքստի կապում

Այսպիսով, մենք պարզեցինք, թե ինչպես է իրականում աշխատում this-ը։ Հիմա եկեք դիտարկենք այն մեթոդները, որոնք թույլ են տալիս հարկադրաբար նշել, թե որ կոնտեքստում է կանչվում ֆունկցիան (այսինքն հարկադրաբար ասել, թե ինչի է հավասար this-ը)։

Առաջին մեթոդը, որը մենք կդիտարկենք, կոչվում է call։ Եկեք նայենք դրա աշխատանքին օրինակով։ Ենթադրենք ունենք input դաշտ։

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

Եկեք ստանանք հղումը դեպի այս input-ը և գրենք այն elem փոփոխականի մեջ։

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

Հիմա ստեղծենք func ֆունկցիան, որի ներսում արտածենք this.value-ը։

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

Մինչ այժմ մեր ֆունկցիան չգիտի, թե ինչին է վերաբերում this-ը։ Եթե այն կապեինք addEventListener-ի միջոցով, ապա այո։ Բայց մենք դա չենք անի։ Փոխարենը մենք պարզապես կկանչենք մեր ֆունկցիան՝ ասելով դրան, որ this-ը պետք է հավասար լինի elem-ին։

Դա արվում է այսպես. func.call(elem)։ Այս կոդը համարժեք է ֆունկցիայի պարզ կանչին func այսպես. func(), միայն այն պայմանով, որ this-ը հավասար է elem-ին։

Այսպիսով, call մեթոդի շարահյուսությունը հետևյալն է. ֆունկցիա.call(օբյեկտ)։ Եկեք հավաքենք ամեն ինչ միասին.

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

function func() {
	console.log(this.value); // կարտածի input-ի value-ն
}
func.call(elem);

Տրված է ֆունկցիա.

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

Տրված են երեք input-ներ.

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

call մեթոդի և func ֆունկցիայի օգնությամբ արտածեք յուրաքանչյուր input-ի value-ն էկրանին։