კონტექსტის მიბმა bind მეთოდის საშუალებით JavaScript-ში

შემდეგი მეთოდი bind საშუალებას აძლევს კონტექსტი სამუდამოდ მივბათ ფუნქციას. ამ მეთოდის შედეგად ის აბრუნებს ახალ ფუნქციას, რომლის შიგნითაც this ექნება მკაცრად მინიჭებული მნიშვნელობა.

მოდით შევხედოთ მაგალითს.

ვთქვათ გვაქვს ინფუთი:

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

ვთქვათ ამ ინფუთის მისამართი ჩაწერილია ცვლადში elem:

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

ვთქვათ ჩვენ ასევე გვაქვს შემდეგი ფუნქცია func:

javascriptfunction func(param1, param2) {
  console.log(this.value + param1 + param2);
}

მოდით bind-ის საშუალებით შევქმნათ ახალი ფუნქცია, რომელიც იქნება ფუნქცია func-ის ასლი, მაგრამ this მასში ყოველთვის იქნება elem-ის ტოლი:

javascriptlet newFunc = func.bind(elem);

ახლა ცვლადში newFunc ჩაწერილია ფუნქცია. მოდით გამოვიძახოთ იგი, პირველ პარამეტრში გადავცეთ '1', ხოლო მეორეში '2' (შეგახსენებთ, რომ elem-ში ჩაწერილია ინფუთი value-თი, რომელიც ტოლია 'text'-ის):

javascriptnewFunc('1', '2');

მოდით ყველაფერი ერთად შევკრიბოთ:

javascriptlet 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-თი:

javascriptfunc = func.bind(elem);

html<input id="elem" value="hello">

javascriptlet 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'