การใช้สภาพแวดล้อมเชิงศัพท์ของฟังก์ชันใน JavaScript

สมมติว่าเรามีฟังก์ชันหนึ่ง ซึ่งผลลัพธ์ของมัน ส่งคืนเป็นฟังก์ชันอีกฟังก์ชันหนึ่ง:

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

หากฟังก์ชันหลักมีตัวแปรใดๆ ตัวแปรเหล่านั้นจะถูกเก็บอยู่ใน สภาพแวดล้อมเชิงศัพท์ของฟังก์ชันที่ถูกส่งคืน:

function test() {
	let num = 1; // ตัวแปรของฟังก์ชันหลัก
	
	return function() {
		// สภาพแวดล้อมเชิงศัพท์ = {num: 1}
	}
}

ลองเขียนในโค้ดของฟังก์ชันที่ถูกส่งคืนของเรา console.log เพื่อแสดงค่าของตัวแปร num:

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

ทีนี้ลองเรียกใช้ฟังก์ชันหลัก test และบันทึกผลการทำงานของมัน ลงในตัวแปร func:

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

let func = test();

ตัวแปร func จะเก็บฟังก์ชันที่ถูกส่งคืน ลองเรียกใช้ฟังก์ชันของเรา - ผลลัพธ์ของมัน จะแสดงเนื้อหาของตัวแปร num:

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

let func = test();
func(); // จะแสดง 1

หากลองพยายามแสดงตัวแปร num นอกฟังก์ชัน - มันจะไม่สามารถเข้าถึงได้:

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

console.log(num); // ตัวแปร num เข้าถึงไม่ได้ที่นี่

อย่างที่คุณเห็น ตัวแปรโลคอล num ได้ผูกติดกับสภาพแวดล้อมเชิงศัพท์ของ ฟังก์ชันของเรา และตอนนี้ เมื่อเรียกใช้ฟังก์ชันนี้ ที่ใดก็ได้ในโค้ด เราสามารถรับค่าของ ตัวแปร num ได้ แม้ว่าในจุดที่ เรียกใช้ ตัวแปรนั้นเองอาจจะเข้าถึงไม่ได้ก็ตาม

จริงๆ แล้วผลลัพธ์แบบเดียวกันสามารถ ทำได้ โดยการทำให้ตัวแปร num เป็นตัวแปรโกลบอล:

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

let num = 1; // ตัวแปรโกลบอล
let func = test();
func(); // จะแสดง 1

อย่างไรก็ตาม จะมีความแตกต่างที่สำคัญตรงนี้: ในเวอร์ชันใหม่ ตัวแปร num สามารถ ถูกเปลี่ยนแปลงนอกฟังก์ชันได้ (เนื่องจากมันเป็นโกลบอล) แต่ในเวอร์ชันเก่า - ทำไม่ได้

จงกำหนดว่า โดยไม่ต้องรันโค้ด อะไรจะถูกแสดงผล ในคอนโซล:

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

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

จงกำหนดว่า โดยไม่ต้องรันโค้ด อะไรจะถูกแสดงผล ในคอนโซล:

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

console.log(test()());

จงกำหนดว่า โดยไม่ต้องรันโค้ด อะไรจะถูกแสดงผล ในคอนโซล:

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

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

จงกำหนดว่า โดยไม่ต้องรันโค้ด อะไรจะถูกแสดงผล ในคอนโซล:

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

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