Closures ใน JavaScript คืออะไร

ความหมายของ Closures

Closures ใน JavaScript ช่วยให้เราสามารถเข้าถึง scope ของฟังก์ชันภายนอกจากฟังก์ชันภายในได้ แม้ว่าฟังก์ชันภายนอกจะทำงานเสร็จและ return แล้วก็ตาม หมายความว่าฟังก์ชันภายในจะเข้าถึงตัวแปรของฟังก์ชันภายนอกได้ตลอดเวลา

ตัวอย่างโค้ด

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  <title>Document</title> 
  <style> 
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    .result { font-size: 20px; font-weight: 500; }
  </style> 
</head> 
<body> 
  <h1>JavaScript Closures</h1> 
  <div style="color: green;" class="result"></div> 
  <button class="Btn">CLICK HERE</button> 
  <h3>คลิกที่ปุ่มด้านบนเพื่อบวกเลขสองจำนวนโดยใช้ closure</h3> 
  <script> 
    let sampleEle = document.querySelector(".sample"); 
    let resEle = document.querySelector(".result"); 
    function add(num) { 
      return function add1(num1) { 
        resEle.innerHTML += `${num}+${num1} = ${num + num1}`; 
      }; 
    } 
    document.querySelector(".Btn").addEventListener("click", () => { 
      let storeadd = add(99); 
      storeadd(44); 
    }); 
  </script> 
</body> 
</html>

ผลลัพธ์

เมื่อคลิกปุ่ม 'CLICK HERE':

คำอธิบาย

ฟังก์ชัน add return ฟังก์ชัน add1 ซึ่งเป็น closure ที่จำค่า num (99) ไว้ เมื่อเรียก storeadd(44) ฟังก์ชันภายในจะเข้าถึง num ได้และคำนวณ 99+44=143