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

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

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

let func = test();

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

javascriptfunction 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 ของตัวเอง นั่นคือเคาน์เตอร์ที่ต่างกัน จะทำงานแยกจากกัน:

javascriptfunction 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 ที่เป็นอิสระของตัวเอง