Kehilangan Konteks dalam JavaScript

Katakan kita mempunyai fungsi dalam fungsi. Mari kita namakan fungsi luaran sebagai parent, dan fungsi dalaman sebagai child:

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

Dari pelajaran sebelumnya, anda tahu bahawa jika mana-mana pembolehubah ditetapkan dalam fungsi luaran - ia akan boleh diakses dalam fungsi dalaman:

function parent() {
	let str = 'abcde';
	
	function child() {
		console.log(str); // akan memaparkan 'abcde'
	}
	child(); // panggil fungsi dalaman
}

parent(); // panggil fungsi luaran

Walau bagaimanapun, terdapat satu nuansa: fungsi dalaman mempunyai akses kepada semua pembolehubah fungsi luar, tetapi tidak mempunyai akses kepada this. Maksudnya: jika fungsi luaran terikat kepada beberapa elemen DOM, maka this di dalamnya akan menunjuk kepada elemen tersebut, tetapi this fungsi dalaman - tidak akan!

Jadi, kepada apakah this fungsi dalaman akan menunjuk? Jawapannya: ia akan sama dengan undefined (dalam mod ketat), kerana fungsi tidak terikat kepada apa-apa.

Mari kita uji secara praktikal. Katakan kita mempunyai satu input:

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

Mari kita ikat fungsi parent kepada input ini, yang akan dipanggil apabila input kehilangan fokus:

"use strict";

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

// Akan dipanggil apabila kehilangan fokus:
function parent() {
	// akan ada beberapa kod di sini
	
	function child() {
		// akan ada beberapa kod di sini
	}
	child(); // panggil fungsi anak
}

Mari kita paparkan kandungan 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 memaparkan rujukan kepada input kami
	
	function child() {
		console.log(this); // akan memaparkan undefined
	}
	child();
}

Jalankan kod ini, hilangkan fokus pada input dan lihat pada konsol - anda akan melihat bahawa console.log pertama akan memaparkan rujukan kepada input kami, manakala yang kedua - hanya undefined. Keadaan sedemikian, di mana this secara tidak dijangka menunjuk bukan kepada apa yang kita perlukan, dipanggil kehilangan konteks.

Sekarang katakan dalam satu dan dalam fungsi kedua kita akan memaparkan value input. Tentukan, apa yang akan dipaparkan dalam baris kod yang ditandakan dengan ulasan:

"use strict";

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

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