ตัวแปรนับจำนวนระดับโลกใน JavaScript

นำตัวแปร num ออกมานอกฟังก์ชัน ทำให้มันกลายเป็นตัวแปรระดับโลก:

let num = 1; // ตัวแปรระดับโลก

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

ในกรณีนี้ ฟังก์ชันทั้งหมดที่ถูกส่งกลับมาจะ เปลี่ยนตัวแปรระดับโลกนี้ และตัวนับ จะทำงานขึ้นอยู่กับกันและกัน:

let num = 1;

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

let func1 = test(); // ตัวนับตัวแรก
func1();  // แสดง 1
func1();  // แสดง 2

let func2 = test(); // ตัวนับตัวที่สอง
func2();  // แสดง 3
func2();  // แสดง 4

ทำไมโค้ดก่อนหน้าของเราถึงสร้างตัวนับ ที่ทำงานแยกจากกันได้? ขอย้อนกลับไปที่โค้ดนี้:

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

เรื่องคือตัวแปร num เป็นตัวแปรระดับท้องถิ่น ภายในฟังก์ชัน test ดังนั้นทุกครั้งที่ เรียกใช้ test ก็จะสร้างตัวแปรระดับท้องถิ่น ของตัวเองขึ้นมา

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

ถ้าทำให้ num เป็นตัวแปรระดับโลก - นี่ก็คือ Closure เช่นเดียวกัน เพียงแต่ สภาพแวดล้อมทางศัพท์ (Lexical Environment) ของฟังก์ชันที่ถูกส่งกลับมานั้นอ้างอิง ไปที่ตัวแปร num เดียวกัน - การเปลี่ยนแปลงใดๆ กับตัวแปรนี้จะสามารถเห็นได้ใน ทุกฟังก์ชัน

พิจารณาโดยไม่ต้องรันโค้ด ว่าจะแสดงอะไร ในคอนโซล:

let counter = 0;
		
function test() {
	return function() {
		console.log(counter);
		counter++;
	};
}

let func = test;

let func1 = func();
let func2 = func();
func1();
func2();
func1();
func2();

พิจารณาโดยไม่ต้องรันโค้ด ว่าจะแสดงอะไร ในคอนโซล:

function test() {
	let counter = 0;
	
	return function() {
		return function() {
			console.log(counter);
			counter++;
		};
	};
}

let func = test()();

let func1 = func;
let func2 = func;
func1();
func2();
func1();
func2();

พิจารณาโดยไม่ต้องรันโค้ด ว่าจะแสดงอะไร ในคอนโซล:

function test() {
	let counter = 0;
	
	return function() {
		return function() {
			console.log(counter);
			counter++;
		};
	};
}

let func = test();

let func1 = func();
let func2 = func();
func1();
func2();
func1();
func2();