Kehilangan Konteks dalam JavaScript

Misalkan kita memiliki fungsi di dalam fungsi. Mari kita sebut fungsi terluar sebagai parent, dan fungsi dalamnya sebagai child:

function parent() {
	function child() {
		
	}
}

Dari pelajaran sebelumnya Anda tahu bahwa jika suatu variabel ditetapkan di fungsi terluar - variabel tersebut akan dapat diakses di fungsi dalam:

function parent() {
	let str = 'abcde';
	
	function child() {
		console.log(str); // akan menampilkan 'abcde'
	}
	child(); // memanggil fungsi dalam
}

parent(); // memanggil fungsi terluar

Namun, ada nuansanya: fungsi dalam memiliki akses ke semua variabel fungsi terluar, tetapi tidak memiliki akses ke this. Artinya: jika fungsi terluar terikat ke suatu elemen DOM, maka this di dalamnya akan merujuk ke elemen tersebut, tetapi this dari fungsi dalam - tidak akan!

Lalu, pada apa this dari fungsi dalam akan merujuk? Jawabannya: itu akan sama dengan undefined (dalam mode ketat), karena fungsi tidak terikat ke apa pun.

Mari kita buktikan secara praktis. Misalkan kita memiliki sebuah input:

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

Mari kita ikat fungsi parent ke input ini, yang akan dipanggil ketika input kehilangan fokus:

"use strict";

let elem = document.querySelector('#elem');
elem.addEventListener('blur', parent);

// Akan dipanggil saat kehilangan fokus:
function parent() {
	// akan ada kode tertentu di sini
	
	function child() {
		// akan ada kode tertentu di sini
	}
	child(); // memanggil fungsi child
}

Mari kita tampilkan isi dari this ke konsol di dua tempat: di dalam fungsi parent dan di dalam fungsi child:

"use strict";

let elem = document.querySelector('#elem');
elem.addEventListener('blur', parent);

function parent() {
	console.log(this); // akan menampilkan referensi ke input kita
	
	function child() {
		console.log(this); // akan menampilkan undefined
	}
	child();
}

Jalankan kode ini, hilangkan fokus pada input dan lihat di konsol - Anda akan melihat bahwa console.log pertama akan menampilkan referensi ke input kita, sedangkan yang kedua - hanya undefined. Situasi seperti ini, ketika this dengan cara yang tidak terduka bagi kita tidak menunjuk pada apa yang kita butuhkan, disebut kehilangan konteks.

Sekarang misalkan di kedua fungsi ini kita akan menampilkan value dari input. Tentukan, apa yang akan ditampilkan pada baris kode yang ditandai dengan komentar:

"use strict";

let elem = document.querySelector('#elem');
elem.addEventListener('blur', parent);

function parent() {
	console.log(this.value); // apa yang akan ditampilkan?
	
	function child() {
		console.log(this.value); // apa yang akan ditampilkan?
	}
	child();
}