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); // 関数を解除します
  });
}