将绑定函数赋值给变量是否为唯一选择？事件监听器this绑定的替代方案问询

嘿，完全理解你觉得this.delegateBind = this.delegate.bind(this)不够优雅的感受——这确实是个标准写法，但咱们有不少更简洁的替代方案，针对你的场景可以按需选择：

1. 用箭头函数定义类方法（最简洁的原生方案） #

如果你是在类里写这个方法，直接把方法定义成箭头函数属性就行。箭头函数不会绑定自己的this，会自动继承外层类实例的上下文，根本不需要手动bind：

class MyComponent {
  // 直接用箭头函数定义方法
  delegate = () => {
    console.log(this); // 这里的this就是类实例，完美指向你要的对象
  };

  init() {
    document.getElementById('myBtn').addEventListener('click', this.delegate);
    // 移除监听也直接用this.delegate就行，不用存额外变量
  }
}

唯一要注意的是：这种写法会把方法变成实例属性（而非原型方法），不过在绝大多数业务场景里这完全不是问题，反而省了bind的步骤。

2. 箭头函数包裹事件回调 #

如果不想修改方法的定义方式，也可以在添加监听器的时候用箭头函数直接包裹调用：

init() {
  document.getElementById('myBtn').addEventListener('click', (e) => this.delegate(e));
}

这里箭头函数的this会继承自init方法的上下文（也就是类实例），所以调用this.delegate时自然能拿到正确的this。不过要注意：每次添加监听都会创建一个新的箭头函数，如果你之后需要移除这个监听器，得提前把这个箭头函数存成变量，不然找不到引用没法移除。

3. 借助装饰器实现自动绑定（需要工具支持） #

如果你用TypeScript或者Babel（开启装饰器语法），可以用@autobind装饰器来自动处理this绑定，代码会更干净：

import { autobind } from 'core-decorators';

class MyComponent {
  @autobind
  delegate() {
    console.log(this); // 自动绑定到类实例
  }

  init() {
    document.getElementById('myBtn').addEventListener('click', this.delegate);
  }
}

这种方式既保留了方法在原型上的特性，又不用手动写bind，非常优雅，但需要依赖装饰器相关的工具链。

总结 #

bind赋值给变量是兼容性最好的经典方案，但绝非唯一选择。如果你的环境支持ES6+，箭头函数属性的写法是最推荐的简洁方案；如果需要保留原型方法，装饰器或者箭头函数包裹都是不错的替代。

内容的提问来源于stack exchange，提问作者calipoop