การสร้าง Private Properties ด้วย Closures ใน JavaScript

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

ตัวอย่างต่อไปนี้แสดงวิธีสร้าง private properties โดยใช้ closures:

<!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; color: blueviolet; }
  </style> 
</head> 
<body> 
  <h1>Private properties, using closures</h1> 
  <div class="result">0</div> 
  <br /> 
  <button class="Btn">CLICK HERE</button> 
  <h3>คลิกที่ปุ่มด้านบนเพื่อเพิ่มค่า counter โดยใช้ closures</h3> 
  <script> 
    let BtnEle = document.querySelector(".Btn"); 
    let resEle = document.querySelector(".result"); 
    function test() { 
      let a = 0; 
      return function incrementA() { 
        a++; 
        return a; 
      }; 
    } 
    let storeVal = test(); 
    BtnEle.addEventListener("click", (event) => { 
      resEle.innerHTML = storeVal(); 
    }); 
  </script> 
</body> 
</html>

ผลลัพธ์

เมื่อคลิกปุ่ม 'CLICK HERE' counter จะเพิ่มขึ้นทุกครั้งที่คลิก:

คำอธิบาย

Closure ช่วยให้ฟังก์ชันภายใน (incrementA) เข้าถึงตัวแปร a ของฟังก์ชันภายนอก (test) ได้ แม้ว่าฟังก์ชันภายนอกจะทำงานเสร็จแล้ว ตัวแปร a จึงกลายเป็น private property ที่เข้าถึงได้เฉพาะผ่านฟังก์ชันที่ return กลับมา