Asas Pengendalian Konteks dalam JavaScript

Katakan kita mempunyai suatu fungsi func, di dalamnya digunakan this:

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

Apakah yang ditunjuk oleh this dalam fungsi ini? Kita tidak tahu. JavaScript pun tidak tahu. Dan fungsi itu sendiri pun tidak tahu. Maksudnya, pada saat penciptaan fungsi, apa yang sebenarnya ditunjuk oleh this, tidak ditentukan. Dan akan ditentukan hanya apabila fungsi tersebut dipanggil.

Katakan kita mempunyai suatu input:

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

Ikat fungsi func kita kepada input ini supaya ia dilaksanakan apabila input kehilangan fokus. Sekarang pada saat pelaksanaan fungsi this akan menunjuk pada input kita:

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

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

Tetapi kita mungkin bukan mempunyai satu input, tetapi beberapa:

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

Dan kepada setiap input ini kita boleh mengikat fungsi func kita. Dalam kes ini untuk elemen pertama this pada saat panggilan fungsi akan menunjuk padanya, dan untuk yang kedua - padanya.

Dalam praktiknya, ini bermaksud this di dalam fungsi bergantung pada input mana kita 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 output sama ada 'text1', atau 'text2'
}

Secara umumnya, ciri this ini sangat mudah - kita mencipta hanya satu fungsi dan mengikatnya kepada sebarang bilangan input. Jika this tidak menunjuk pada elemen itu, di mana peristiwa berlaku, maka kita tidak akan berjaya - terpaksa untuk setiap input mencipta fungsi sendiri dengan kod yang sama!