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:

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

Misalkan tautan ke input ini dicatat dalam variabel elem:

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

Misalkan kita juga memiliki fungsi berikut func:

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

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

javascriptnewFunc('1', '2');

Mari kita kumpulkan semuanya:

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

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

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