JavaScript 中 this 怎么在事件解绑（removeEventListener）时因为 bind 产生新函数引发解绑失效-js教程-PHP中文网

removeeventlistener 失效主因是 bind 每次返回新函数引用，导致绑定与解绑函数不等；正确方式有三：保存 bound 引用、用箭头函数闭包、传含 handleevent 的对象；推荐 abortcontroller 替代手动管理。

javascript 中 this 怎么在事件解绑（removeeventlistener）时因为 bind 产生新函数引发解绑失效

在 JavaScript 中，removeEventListener 失效的常见原因之一，就是给事件处理函数用了 bind，但解绑时没用**同一个函数引用**——而 bind 每次都返回一个新函数，导致“绑的是 A，删的是 B”，自然删不掉。

为什么 bind 后 removeEventListener 会失效

addEventListener 和 removeEventListener 是严格比对函数引用的（即 ===），不是比对函数逻辑或内容。而 fn.bind(obj, arg) 每次调用都会创建并返回一个全新的函数对象：

const handler = function() { console.log(this.value); };
const bound1 = handler.bind({ value: 1 });
const bound2 = handler.bind({ value: 1 });

console.log(bound1 === bound2); // false ← 关键！

所以如果你这样写：

btn.addEventListener('click', handler.bind(obj));
// ……后来想解绑：
btn.removeEventListener('click', handler.bind(obj)); // ❌ 失效！bound 是另一个新函数

正确解绑的 3 种实用方式

提前保存 bind 后的函数引用：只 bind 一次，存变量，绑定和解绑都用它

const boundHandler = handler.bind(obj);
btn.addEventListener('click', boundHandler);
// ……
btn.removeEventListener('click', boundHandler); // ✅ 成功

用箭头函数 + 闭包捕获 this（适合简单场景）：避免 bind，直接在定义时固化上下文

const obj = { value: 42 };
const handler = () => console.log(obj.value); // 箭头函数不绑定 this，靠外层闭包
btn.addEventListener('click', handler);
// ……
btn.removeEventListener('click', handler); // ✅ 同一引用

使用对象方法 + handleEvent（标准但少用）：让对象本身实现 handleEvent 接口，this 自动是该对象，无需 bind

const obj = {
  value: 99,
  handleEvent(e) {
    console.log(this.value); // this 就是 obj
  }
};
btn.addEventListener('click', obj); // ✅ 传对象，浏览器自动调用 obj.handleEvent
// ……
btn.removeEventListener('click', obj); // ✅ 解绑也用同一对象引用

额外注意：匿名函数 + bind 一定失效

以下写法看似简洁，实则必然解绑失败：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

// ❌ 千万别这么写
btn.addEventListener('click', function() { ... }.bind(obj));
btn.removeEventListener('click', function() { ... }.bind(obj)); // 两个匿名函数 + 两次 bind → 两个不同函数

即使函数体一模一样，每次 function(){} 都是新函数，再加 bind 就是双重“失联”。

现代替代方案：用 AbortController（推荐用于一次性/可控生命周期）

如果你只是想“在某个时机取消监听”，不必手动管理 add/remove，可用 AbortSignal：

const controller = new AbortController();
btn.addEventListener('click', () => { ... }, { signal: controller.signal });

// 后来想停掉：
controller.abort(); // ✅ 自动移除所有带该 signal 的监听器

这种方式不依赖函数引用匹配，更健壮，尤其适合组件卸载、异步清理等场景。