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

Հաջորդ մեթոդը bind թույլ է տալիս մշտապես կապել կոնտեքստը ֆունկցիային: Այս մեթոդը արդյունքում վերադարձնում է նոր ֆունկցիա, որի ներսում this-ը կունենա խիստ սահմանված արժեք:

Դիտարկենք օրինակով:

Ենթադրենք ունենք input դաշտ:

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

Ենթադրենք այս input-ի հղումը գրված է փոփոխականի մեջ 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-ում գտնվում է input դաշտ value-ով, որը հավասար է 'text'-ի):

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 մեթոդով այնպես, որ this-ը ֆունկցիայի ներսում func միշտ ցույց տա փոփոխականում գտնվող input դաշտին elem: