Ứng dụng Môi trường từ vựng của Hàm trong JavaScript

Giả sử chúng ta có một hàm, kết quả của nó trả về một hàm khác:

javascriptfunction test() {
  return function() {
    
  }
}

Nếu hàm cha có bất kỳ biến nào, thì các biến đó sẽ được chứa trong môi trường từ vựng của hàm được trả về:

javascriptfunction test() {
  let num = 1; // biến của hàm cha
  
  return function() {
    // môi trường từ vựng = {num: 1}
  }
}

Hãy viết trong mã của hàm được trả về của chúng ta console.log, in ra giá trị của biến num:

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

Bây giờ hãy gọi hàm cha test và ghi kết quả làm việc của nó vào biến func:

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

let func = test();

Vào biến func sẽ ghi lại hàm được trả về. Hãy gọi hàm của chúng ta - kết quả của nó sẽ in ra nội dung của biến num:

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

let func = test();
func(); // sẽ in ra 1

Nếu chỉ đơn giản cố gắng truy cập biến num bên ngoài hàm - nó sẽ không khả dụng:

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

console.log(num); // biến num ở đây không khả dụng

Như bạn thấy, biến cục bộ num đã liên kết với môi trường từ vựng của hàm chúng ta và bây giờ, bằng cách gọi hàm này ở bất kỳ đâu trong mã, chúng ta có thể lấy được giá trị của biến num, ngay cả khi ở nơi gọi, bản thân biến này không khả dụng.

Thực tế, có thể đạt được kết quả tương tự bằng cách biến biến num thành toàn cục:

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

let num = 1; // biến toàn cục
let func = test();
func(); // sẽ in ra 1

Tuy nhiên, ở đây sẽ có một sự khác biệt đáng kể: trong phiên bản mới, biến num có thể được thay đổi bên ngoài các hàm (vì nó là toàn cục), còn trong phiên bản cũ - thì không.

javascriptfunction test() {
  let num1 = 1;
  let num2 = 2;
  
  return function() {
    return num1 + num2;
  }
}

let func = test();
console.log(func());

javascriptfunction test() {
  let num1 = 1;
  let num2 = 2;
  
  return function() {
    return num1 + num2;
  }
}

console.log(test()());

javascriptfunction test() {
  let num1 = 1;
  
  return function() {
    return num1 + num2;
  }
}

let num2 = 2;
let func = test();
console.log(func());

javascriptfunction test() {
  let num = 1;
  
  return function() {
    return num;
  }
}

let num = 2;
let func = test();
console.log(func());