Mengikat Konteks Melalui Kaedah call dalam JavaScript

Jadi, kita telah memahami bagaimana sebenarnya this berfungsi. Sekarang mari kita lihat kaedah-kaedah yang membolehkan kita menentukan secara paksa, dalam konteks mana fungsi dipanggil (iaitu menentukan secara paksa, apa nilai this).

Kaedah pertama yang akan kita bincangkan, dipanggil call. Mari kita lihat cara kerjanya melalui contoh. Katakan kita mempunyai satu input:

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

Mari dapatkan rujukan kepada input ini dan simpan ia dalam pembolehubah elem:

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

Sekarang mari buat fungsi func, di dalamnya kita akan paparkan this.value:

function func() {
	console.log(this.value);
}

Setakat ini, fungsi kita tidak tahu apa yang dirujuk oleh this. Jika kita mengikatnya melalui addEventListener, maka ya. Tapi kita tidak akan buat begitu. Sebaliknya kita hanya akan memanggil fungsi kita, dengan menyatakan bahawa this perlu sama dengan elem.

Ini dilakukan seperti berikut: func.call(elem). Kod ini setara dengan memanggil fungsi secara mudah func seperti ini: func(), cuma dengan syarat bahawa this sama dengan elem.

Jadi, sintaks untuk kaedah call adalah: fungsi.call(objek). Mari kita kumpulkan semua sekali:

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

function func() {
	console.log(this.value); // akan memaparkan value input
}
func.call(elem);

Diberi fungsi:

function func() {
	console.log(this.value);
}

Diberi tiga input:

<input id="elem1" value="text1">
<input id="elem2" value="text2">
<input id="elem3" value="text3">

Dengan menggunakan kaedah call dan fungsi func paparkan value bagi setiap input.