Dasar-Dasar Bekerja dengan Konteks di JavaScript

Misalkan kita memiliki suatu fungsi func, di dalamnya menggunakan this:

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

Apa yang ditunjuk oleh this dalam fungsi ini? Kita tidak tahu. Dan JavaScript tidak tahu. Dan fungsi itu sendiri tidak tahu. Artinya, pada saat pembuatan fungsi, apa yang sebenarnya ditunjuk oleh this, tidak ditentukan. Dan akan ditentukan hanya ketika fungsi tersebut dipanggil.

Misalkan kita memiliki suatu input:

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

Mari kita kaitkan fungsi func kita ke input ini sehingga fungsi itu dijalankan saat kehilangan fokus input. Sekarang pada saat eksekusi fungsi this akan menunjuk ke input kita:

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

elem.addEventListener('blur', func);
function func() {
	console.log(this.value); // saat kehilangan fokus akan menampilkan 'text'
}

Tapi bukankah kita bisa memiliki tidak hanya satu input, tapi beberapa:

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

Dan ke setiap input ini kita dapat mengaitkan fungsi func kita. Dalam hal ini untuk elemen pertama this pada saat pemanggilan fungsi akan menunjuk padanya, dan untuk yang kedua - padanya.

Dalam praktiknya, ini berarti this di dalam fungsi tergantung pada input mana yang kehilangan fokus:

let elem1 = document.querySelector('#elem1');
elem1.addEventListener('blur', func);

let elem2 = document.querySelector('#elem2');
elem2.addEventListener('blur', func);

function func() {
	console.log(this.value); // akan menampilkan 'text1' atau 'text2'
}

Secara umum, fitur this seperti ini sangat mudah - kita hanya membuat satu fungsi dan mengaitkannya ke sejumlah input. Jika this tidak menunjuk ke elemen itu, di mana peristiwa terjadi, maka kita tidak akan bisa melakukannya - kita harus membuat fungsi sendiri untuk setiap input dengan kode yang sama!