Penggunaan Persekitaran Leksikal Fungsi dalam JavaScript

Katakan kita mempunyai fungsi yang mengembalikan fungsi lain sebagai hasilnya:

function test() {
	return function() {
		
	}
}

Jika fungsi induk mempunyai sebarang pembolehubah, maka pembolehubah tersebut akan terkandung dalam persekitaran leksikal fungsi yang dikembalikan:

function test() {
	let num = 1; // pembolehubah fungsi induk
	
	return function() {
		// persekitaran leksikal = {num: 1}
	}
}

Tuliskan dalam kod fungsi yang dikembalikan kita console.log, yang memaparkan nilai pembolehubah num:

function test() {
	let num = 1;
	
	return function() {
		console.log(num);
	}
}

Sekarang mari kita panggil fungsi induk test dan tulis hasil kerjanya ke dalam pembolehubah func:

function test() {
	let num = 1;
	
	return function() {
		console.log(num);
	}
}

let func = test();

Fungsi yang dikembalikan akan ditulis ke dalam pembolehubah func. Mari kita panggil fungsi kita - hasilnya ia akan memaparkan kandungan pembolehubah num:

function test() {
	let num = 1;
	
	return function() {
		console.log(num);
	}
}

let func = test();
func(); // akan memaparkan 1

Jika cuba memaparkan pembolehubah num di luar fungsi - ia tidak akan dapat diakses:

function test() {
	let num = 1;
	
	return function() {
		console.log(num);
	}
}

console.log(num); // pembolehubah num tidak dapat diakses di sini

Seperti yang anda lihat, pembolehubah tempatan num telah terikat pada persekitaran leksikal fungsi kita dan sekarang, dengan memanggil fungsi ini di mana-mana sahaja dalam kod, kita boleh mendapatkan nilai pembolehubah num, walaupun di tempat panggilan itu sendiri pembolehubah ini tidak dapat diakses.

Sebenarnya, hasil yang serupa boleh dicapai dengan menjadikan pembolehubah num global:

function test() {
	return function() {
		console.log(num);
	}
}

let num = 1; // pembolehubah global
let func = test();
func(); // akan memaparkan 1

Walau bagaimanapun, terdapat perbezaan yang ketara di sini: dalam versi baru, pembolehubah num boleh diubah di luar fungsi (kerana ia global), manakala dalam versi lama - tidak.

Tentukan, tanpa menjalankan kod, apa yang akan dipaparkan dalam konsol:

function test() {
	let num1 = 1;
	let num2 = 2;
	
	return function() {
		return num1 + num2;
	}
}

let func = test();
console.log(func());

Tentukan, tanpa menjalankan kod, apa yang akan dipaparkan dalam konsol:

function test() {
	let num1 = 1;
	let num2 = 2;
	
	return function() {
		return num1 + num2;
	}
}

console.log(test()());

Tentukan, tanpa menjalankan kod, apa yang akan dipaparkan dalam konsol:

function test() {
	let num1 = 1;
	
	return function() {
		return num1 + num2;
	}
}

let num2 = 2;
let func = test();
console.log(func());

Tentukan, tanpa menjalankan kod, apa yang akan dipaparkan dalam konsol:

function test() {
	let num = 1;
	
	return function() {
		return num;
	}
}

let num = 2;
let func = test();
console.log(func());