Biến toàn cục đếm trong JavaScript

Hãy đưa biến num ra ngoài các hàm, từ đó biến nó thành biến toàn cục:

javascriptlet num = 1; // biến toàn cục

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

Trong trường hợp này, tất cả các hàm được trả về sẽ thay đổi biến toàn cục này và các bộ đếm sẽ hoạt động phụ thuộc lẫn nhau:

javascriptlet num = 1;

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

let func1 = test(); // bộ đếm thứ nhất
func1();  // sẽ in ra 1
func1();  // sẽ in ra 2

let func2 = test(); // bộ đếm thứ hai
func2();  // sẽ in ra 3
func2();  // sẽ in ra 4

Tại sao code trước đó của chúng ta lại tạo ra các bộ đếm độc lập? Hãy nhớ lại code này:

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

Vấn đề là biến num - là biến cục bộ bên trong hàm test. Do đó mỗi lần gọi test sẽ tạo ra biến cục bộ riêng của nó.

Vì vậy, các hàm được trả về sẽ tham chiếu mỗi hàm đến một biến cục bộ riêng của hàm test. Chính điều này đạt được sự độc lập trong hoạt động.

Nếu biến num được tạo thành biến toàn cục - thì đó cũng sẽ là một closure. Chỉ là các môi trường từ vựng của các hàm được trả về đều tham chiếu đến cùng một biến num - bất kỳ thay đổi nào với biến này sẽ được nhìn thấy trong tất cả các hàm.

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