Mengikat Konteks Melalui Kaedah bind dalam JavaScript

Kaedah seterusnya bind membolehkan konteks dikaitkan secara kekal dengan fungsi. Hasil daripada kaedah ini mengembalikan fungsi baharu, di dalamnya this akan mempunyai nilai yang ditetapkan secara tegar.

Mari kita lihat contoh.

Katakan kita mempunyai input:

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

Katakan pautan ke input ini direkodkan dalam pembolehubah elem:

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

Katakan kita juga mempunyai fungsi berikut func:

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

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

let newFunc = func.bind(elem);

Sekarang dalam pembolehubah newFunc terdapat fungsi. Mari kita panggilnya, dengan menghantar ke parameter pertama '1', dan ke parameter kedua '2' (saya ingatkan, dalam elem terdapat input dengan value, 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 memaparkan 'text12'

Tidak semestinya mencatatkan hasil kerja bind ke dalam fungsi baharu newFunc, boleh hanya menulis semula func. Selepas itu func akan menjadi fungsi yang sama seperti sebelumnya, tetapi dengan this yang dikaitkan secara tegar:

func = func.bind(elem);

Katakan diberikan kod 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 sepatutnya memaparkan 'hello, John Smit'
func('Eric', 'Luis'); // di sini sepatutnya memaparkan 'hello, Eric Luis'

Tulis di tempat yang ditunjukkan konstruksi dengan kaedah bind supaya this di dalam fungsi func sentiasa merujuk kepada input dari pembolehubah elem.