การใช้งานจริงสำหรับการปิดใน Javascript?

การปิดคือการรวมกันของฟังก์ชันและสภาพแวดล้อมของคำศัพท์ซึ่งมีการประกาศฟังก์ชันนั้น

function outerFunc() {
   var name = "TutorialsPoint"; // name is a local variable created by outerFunc
   return function innerFunc() {
      // innerFunc() is the inner function, a closure
      console.log(name); // use variable declared in the parent function
   };
}
let f = outerFunc();
f()

outerFunc() สร้างตัวแปรโลคัลชื่อ name และฟังก์ชั่นที่เรียกว่า innerFunc() ฟังก์ชัน innerFunc() เป็นฟังก์ชันภายในที่กำหนดไว้ภายใน outerFunc() และใช้ได้เฉพาะภายในเนื้อหาของฟังก์ชัน outerFunc()

โปรดทราบว่าฟังก์ชัน innerFunc() ไม่มีตัวแปรในเครื่องของตัวเอง อย่างไรก็ตาม เนื่องจากฟังก์ชัน inner สามารถเข้าถึงตัวแปรของฟังก์ชันภายนอกได้ innerFunc() จึงสามารถเข้าถึงชื่อตัวแปรที่ประกาศไว้ในฟังก์ชันหลักได้ outerFunc()

คุณจะเห็นว่าชื่อนั้นอยู่นอกขอบเขตเมื่อ outerFunc ดำเนินการเสร็จสิ้น แต่ถ้าคุณมองอย่างใกล้ชิด innerFunc ที่ส่งคืนและกำหนดให้กับ f ยังคงสามารถเข้าถึงตัวแปรชื่อได้ ดังนั้น inner func จึงปิดขอบเขตคำศัพท์ของ outerFunc

การใช้งานจริง

จำลองวิธีการส่วนตัว −ภาษาเช่น Java ให้ความสามารถในการประกาศเมธอดส่วนตัว หมายความว่าสามารถเรียกเมธอดอื่นในคลาสเดียวกันเท่านั้น JavaScript ไม่มีวิธีการดั้งเดิมในการทำเช่นนี้ แต่เป็นไปได้ที่จะเลียนแบบวิธีการส่วนตัวโดยใช้การปิด

ตัวอย่าง

var counter = (() => {
   var privateCounter = 0;
   let changeBy = (val) => privateCounter += val;
   return {
      increment: () => changeBy(1),
      decrement: () => changeBy(-1),
      value: () => privateCounter
   };
})();
console.log(counter.value());
counter.increment();
counter.increment();
console.log(counter.value());
counter.decrement();
console.log(counter.value());

ผลลัพธ์

0
2
1

ใช้กับตัวจัดการเหตุการณ์

for(let i = 0; i < 4; i++) {
   button = buttons[i]
   button.addEventListener("click", alert(i))
}

ถ้าคุณมีปุ่ม 4 ปุ่มในปุ่มคอลเลกชัน และพยายามเพิ่มตัวฟังเหตุการณ์เช่นนี้ การคลิกที่ปุ่มเหล่านั้นจะทำให้ผลลัพธ์ไม่ได้ถูกกำหนด นี่เป็นเพราะเมื่อพวกมันถูกเรียก ฉันจะไม่ถูกกำหนดอีกต่อไป วิธีแก้ไขคือแนะนำการปิดทับ i

for(let i = 0; i < 4; i++) {
   button = buttons[i]
   button.addEventListener("click", () => alert(i))
}