การแยกฟังก์ชันนิรนามใน JavaScript

ตอนนี้ให้ฟังก์ชันนิรนามผูกไว้กับย่อหน้าของเรา:

javascriptlet elems = document.querySelectorAll('p');

for (let elem of elems) {
  elem.addEventListener('click', function() {
    console.log(this.textContent);
  });
}

สมมติว่าเราต้องการแยกฟังก์ชันนี้ออกจากย่อหน้า หลังจากคลิกที่ย่อหน้านี้ อย่างไรก็ตาม เราจะพบปัญหา: ฟังก์ชันไม่มีชื่อ ซึ่งหมายความว่า เราจะไม่สามารถอ้างอิงถึงฟังก์ชันด้วยชื่อนั้นได้ เพื่อแยกมันออก

เพื่อแก้ไขปัญหา จำเป็นต้องตั้งชื่อให้ฟังก์ชัน ทำให้มันเป็น นิพจน์ฟังก์ชันที่มีชื่อ มาทำกัน:

javascriptlet elems = document.querySelectorAll('p');

for (let elem of elems) {
  elem.addEventListener('click', function func() { // ตั้งชื่อให้ฟังก์ชัน
    console.log(this.textContent);
  });
}

ตอนนี้ฟังก์ชันนี้สามารถถูกแยกออกได้ภายใน ตัวมันเอง:

javascriptlet elems = document.querySelectorAll('p');

for (let elem of elems) {
  elem.addEventListener('click', function func() {
    console.log(this.textContent);
    this.removeEventListener('click', func); // แยกฟังก์ชันออก
  });
}