Binding Konteks dengan Metode call di JavaScript

Jadi, kita telah membahas bagaimana sebenarnya this bekerja. Sekarang mari kita lihat metode-metode yang memungkinkan kita untuk secara paksa menentukan dalam konteks apa sebuah fungsi dipanggil (yaitu secara paksa mengatakan, apa yang sama dengan this).

Metode pertama yang akan kita bahas bernama call. Mari kita lihat cara kerjanya dengan contoh. Misalkan kita memiliki sebuah input:

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

Mari kita dapatkan referensi ke input ini dan simpan dalam variabel elem:

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

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

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

Saat ini fungsi kita belum tahu, apa yang dirujuk oleh this. Seandainya kita mengikatnya melalui addEventListener, maka iya. Tapi kita tidak akan melakukannya. Sebagai gantinya kita hanya akan memanggil fungsi kita, dengan mengatakan bahwa this harus sama dengan elem.

Ini dilakukan seperti ini: func.call(elem). Kode ini setara dengan pemanggilan fungsi sederhana func seperti ini: func(), hanya saja dengan syarat bahwa this sama dengan elem.

Jadi, sintaks metode call adalah: fungsi.call(objek). Mari kita kumpulkan semua bersama:

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

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

Diberikan fungsi:

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

Diberikan tiga input:

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

Dengan menggunakan metode call dan fungsi func tampilkan value dari setiap input.