Binding Konteks dengan Metode bind di JavaScript

Metode berikutnya bind memungkinkan untuk mengikat konteks ke suatu fungsi secara permanen. Hasil dari metode ini mengembalikan fungsi baru, di dalam mana this akan memiliki nilai yang ditetapkan secara keras.

Mari kita lihat contohnya.

Misalkan kita memiliki sebuah input:

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

Misalkan tautan ke input ini dicatat dalam variabel elem:

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

Misalkan kita juga memiliki fungsi berikut func:

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

Mari kita gunakan bind untuk membuat fungsi baru, yang akan menjadi salinan dari fungsi func, tetapi this di dalamnya akan selalu sama dengan elem:

let newFunc = func.bind(elem);

Sekarang di dalam variabel newFunc terdapat sebuah fungsi. Mari kita panggil, dengan memberikan parameter pertama '1', dan parameter kedua '2' (saya ingatkan, bahwa di elem terdapat input dengan value, yang sama dengan 'text'):

newFunc('1', '2');

Mari kita kumpulkan semuanya:

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

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

let newFunc = func.bind(elem);
newFunc('1', '2'); // akan menampilkan 'text12'

Tidak harus mencatat hasil kerja bind ke dalam fungsi baru newFunc, dapat juga hanya menimpa func. Setelah itu func akan menjadi fungsi yang sama, seperti sebelumnya, tetapi dengan this yang terikat secara keras:

func = func.bind(elem);

Misalkan diberikan kode berikut:

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

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

function func(name, surname) {
	console.log(this.value + ', ' + name + ' ' + surname);
}

// tulis di sini konstruksi dengan bind()

func('John', 'Smit'); // di sini harus menampilkan 'hello, John Smit'
func('Eric', 'Luis'); // di sini harus menampilkan 'hello, Eric Luis'

Tulis di tempat yang ditentukan konstruksi dengan metode bind sehingga this di dalam fungsi func selalu menunjuk ke input dari variabel elem.