React组件中函数调用及事件绑定this指向问题解决

兄弟你完全猜对了！问题核心就是this的指向异常：当你把组件内的handleKey函数绑定到document的事件监听器时，函数执行时的this会指向document，而非你的React组件实例，所以才会报错说getCurrentMarioPosition不是可用函数。

下面给你几种常用的解决方案，按需选择就行：

1. 用类字段（Class Fields）语法定义箭头函数方法 #

这是最简洁的方案，ES6+支持。直接用箭头函数定义组件方法，它会自动把this绑定到组件实例，不管在哪里调用都不会跑偏：

class MarioGame extends React.Component {
  // 用箭头函数定义事件处理器，this自动绑定组件实例
  handleKey = (e) => {
    // 这里的this就是组件实例，放心调用方法
    const marioPos = this.getCurrentMarioPosition();
    console.log('马里奥当前位置：', marioPos);
    // 其他按键逻辑
  }

  getCurrentMarioPosition() {
    // 这里写获取位置的逻辑
    return { x: 50, y: 100 };
  }

  componentDidMount() {
    // 直接绑定handleKey即可
    document.addEventListener('keydown', this.handleKey);
  }

  componentWillUnmount() {
    // 务必移除监听器，避免内存泄漏
    document.removeEventListener('keydown', this.handleKey);
  }

  render() {
    return <div>马里奥游戏</div>;
  }
}

2. 在构造函数中手动绑定this #

这是React早期的经典方案，兼容性最好，适合所有ES版本：

class MarioGame extends React.Component {
  constructor(props) {
    super(props);
    // 手动把handleKey的this绑定到组件实例
    this.handleKey = this.handleKey.bind(this);
  }

  handleKey(e) {
    const marioPos = this.getCurrentMarioPosition();
    // 按键逻辑
  }

  getCurrentMarioPosition() {
    return { x: 50, y: 100 };
  }

  componentDidMount() {
    document.addEventListener('keydown', this.handleKey);
  }

  componentWillUnmount() {
    document.removeEventListener('keydown', this.handleKey);
  }

  render() {
    return <div>马里奥游戏</div>;
  }
}

3. 在绑定监听器时用箭头函数包裹 #

这个方案直观，但要注意如果直接在addEventListener里写匿名箭头函数，移除监听器时要保存同一个函数引用，不然会移除失败：

class MarioGame extends React.Component {
  constructor(props) {
    super(props);
    // 把箭头函数存为实例属性，方便后续移除
    this.keyHandler = (e) => this.handleKey(e);
  }

  handleKey(e) {
    const marioPos = this.getCurrentMarioPosition();
    // 按键逻辑
  }

  getCurrentMarioPosition() {
    return { x: 50, y: 100 };
  }

  componentDidMount() {
    document.addEventListener('keydown', this.keyHandler);
  }

  componentWillUnmount() {
    // 用同一个引用移除监听器
    document.removeEventListener('keydown', this.keyHandler);
  }

  render() {
    return <div>马里奥游戏</div>;
  }
}

重要提醒 #

不管用哪种方案，一定要在componentWillUnmount生命周期里移除事件监听器，不然组件卸载后，监听器还挂在document上，不仅会造成内存泄漏，还可能因为组件实例已销毁而触发报错。

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