เคาน์เตอร์โดยใช้ Closures ใน JavaScript

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

function test() {
	let num = 1;
	
	return function() {
		console.log(num);
		num++; // เพิ่มทีละหนึ่ง
	}
}

let func = test();

มันจะกลายเป็นว่าทุกครั้งที่เรียกฟังก์ชัน func จะแสดงค่าใหม่ในคอนโซล:

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

let func = test();

func(); //จะแสดง 1
func(); //จะแสดง 2
func(); //จะแสดง 3
func(); //จะแสดง 4
func(); //จะแสดง 5

กลายเป็นว่าเราได้สร้างเคาน์เตอร์สำหรับการเรียก ฟังก์ชันขึ้นมา โดยใช้ closure (หรือกล่าวอย่างแม่นยำคือใช้ ตัวแปร num จาก closure ของฟังก์ชันของเรา)

โปรดทราบว่าทุกครั้งที่เรียกฟังก์ชัน test จะส่งคืนฟังก์ชันใหม่ ซึ่งฟังก์ชันนั้น จะมี closure ของตัวเอง นั่นคือเคาน์เตอร์ที่ต่างกัน จะทำงานแยกจากกัน:

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

let func1 = test(); // เคาน์เตอร์แรก
func1();  //จะแสดง 1
func1();  //จะแสดง 2

let func2 = test(); // เคาน์เตอร์ที่สอง
func2();  //จะแสดง 1
func2();  //จะแสดง 2

กลายเป็นว่าตัวแปร num เดียวกัน สำหรับฟังก์ชันที่ต่างกันจะมีค่าที่ต่างกัน!

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

ทำด้วยตัวเอง โดยไม่แอบดูโค้ดของฉัน สร้างเคาน์เตอร์การเรียกฟังก์ชันที่ทำงาน โดยใช้ closures

ให้ฟังก์ชันใน closure เก็บตัวเลข 10 ทำให้การเรียกฟังก์ชันทุกครั้ง ลดตัวเลขนี้ลง 1 และแสดง ตัวเลขที่ลดลงในคอนโซล

ปรับเปลี่ยนโจทย์ก่อนหน้าให้ การนับถอยหลังถึง 0 จากนั้น การเรียกฟังก์ชันทุกครั้งหลังจากนั้นให้แสดงข้อความ ในคอนโซลว่าการนับถอยหลังสิ้นสุดแล้ว