JavaScript'te bind Metodu ile Bağlam Bağlama

Bir sonraki metod bind, bağlamı bir fonksiyona kalıcı olarak bağlamanıza izin verir. Bu metod, sonucunda içinde this'in kesin olarak belirlenmiş bir değere sahip olacağı yeni bir fonksiyon döndürür.

Bir örnek üzerinden inceleyelim.

Bir input elemanımız olduğunu varsayalım:

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

Bu inputa referansın elem değişkeninde kayıtlı olduğunu varsayalım:

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

Ayrıca aşağıdaki func fonksiyonumuzun olduğunu varsayalım:

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

bind kullanarak, func fonksiyonunun bir kopyası olan, ancak içindeki this'in her zaman elem'e eşit olacağı yeni bir fonksiyon yapalım:

javascriptlet newFunc = func.bind(elem);

Şimdi newFunc değişkeninde bir fonksiyon bulunuyor. İlk parametreye '1', ikinci parametreye ise '2' ileterek çağıralım (elem'in value değeri 'text' olan inputu tuttuğunu hatırlatayım):

javascriptnewFunc('1', '2');

Hepsini bir araya getirelim:

javascriptlet elem = document.getElementById('elem');

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

let newFunc = func.bind(elem);
newFunc('1', '2'); // 'text12' yazacaktır

bind metodunun sonucunu yeni bir newFunc fonksiyonuna yazmak zorunda değilsiniz, sadece func'ın üzerine yazabilirsiniz. Bundan sonra func, eskisi gibi aynı fonksiyon olacak, ancak this kesin olarak bağlanmış olacak:

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);
}

// buraya bind() ile yapıyı yazın

func('John', 'Smit'); // burada 'hello, John Smit' yazmalı
func('Eric', 'Luis'); // burada 'hello, Eric Luis' yazmalı