การใช้สภาพแวดล้อมเชิงศัพท์ของฟังก์ชันใน JavaScript

สมมติว่าเรามีฟังก์ชันหนึ่ง ซึ่งผลลัพธ์ของมัน ส่งคืนเป็นฟังก์ชันอีกฟังก์ชันหนึ่ง:

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

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

javascriptfunction test() {
  let num = 1; // ตัวแปรของฟังก์ชันหลัก
  
  return function() {
    // สภาพแวดล้อมเชิงศัพท์ = {num: 1}
  }
}

ลองเขียนในโค้ดของฟังก์ชันที่ถูกส่งคืนของเรา console.log เพื่อแสดงค่าของตัวแปร num:

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

ทีนี้ลองเรียกใช้ฟังก์ชันหลัก test และบันทึกผลการทำงานของมัน ลงในตัวแปร func:

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

let func = test();

ตัวแปร func จะเก็บฟังก์ชันที่ถูกส่งคืน ลองเรียกใช้ฟังก์ชันของเรา - ผลลัพธ์ของมัน จะแสดงเนื้อหาของตัวแปร num:

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

let func = test();
func(); // จะแสดง 1

หากลองพยายามแสดงตัวแปร num นอกฟังก์ชัน - มันจะไม่สามารถเข้าถึงได้:

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

console.log(num); // ตัวแปร num เข้าถึงไม่ได้ที่นี่

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

จริงๆ แล้วผลลัพธ์แบบเดียวกันสามารถ ทำได้ โดยการทำให้ตัวแปร num เป็นตัวแปรโกลบอล:

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

let num = 1; // ตัวแปรโกลบอล
let func = test();
func(); // จะแสดง 1

อย่างไรก็ตาม จะมีความแตกต่างที่สำคัญตรงนี้: ในเวอร์ชันใหม่ ตัวแปร num สามารถ ถูกเปลี่ยนแปลงนอกฟังก์ชันได้ (เนื่องจากมันเป็นโกลบอล) แต่ในเวอร์ชันเก่า - ทำไม่ได้

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