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

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

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

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

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

javascriptlet num = 1;

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

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

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

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

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

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

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

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

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

let func = test;

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

javascriptfunction 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();

javascriptfunction 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();