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:

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

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

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

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

function 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:

let 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):

newFunc('1', '2');

Hepsini bir araya getirelim:

let 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:

func = func.bind(elem);

Aşağıdaki kodun verildiğini varsayalım:

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

let 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ı

Belirtilen yere, func fonksiyonunun içindeki this'in her zaman elem değişkenindeki inputu göstermesi için bind metodu ile yapıyı yazın.