记录一次ts代码中因为this指向导致的报错

记录一次ts代码中因为this指向导致的报错

我们看下面这一段代码：

export class WebviewScreenViewModel extends BaseViewModel {
    .
    .
    .

  public getTriggerFromItent = (itent: string): number => {
    const itentToTrigger: any = {
      'phq': 1101
    }
    return itentToTrigger[itent];
  }

  // 设置开启长拾音，或者关闭长拾音
  public setSpeechRecognizeMode = (flag: any): void => {
    speechApi.setRecognizeMode(flag);
  };

  /**
   * 接收h5发送的消息
   */
  public onMessage(event: any) {
    const data: string = JSON.parse(event.nativeEvent.data);
    console.log('meaasgeData', data);
    const { type, intent } = data;
    switch (type) {
      case 'speech':
        // 语音播报
        playText(data.text)
        break;
      case 'navigate':
        // 获取triggerId，跳转页面
        const triggerId: number = this.getTriggerFromItent(intent);
        triggerId && this._apiTrigger(triggerId, '')
        break;
      case 'recognize':
        // 设置开启或者关闭长拾音
        this.setSpeechRecognizeMode(intent);
        break;
      default:
        playText(data.text)
        break;
    }
  }
  .
  .
  .
}

​ 在onMessage方法中执行setSpeechRecognizeMode这个已经定义过的函数，乍看是没有什么问题的，但是项目打包到设备上运行的时候报出来这样一个错误：

​ 这个报错着实让人摸不着头脑，于是我把this.setSpeechRecognizeMode打印出来，发现竟然是undefined！既然this里面没有这个函数，那么说明这个this指向是有问题的，那么它指向了哪里呢？

​ 我找到引用这部分代码的部分：

​ 这是在另外一个类里面调用上面代码的onMessage方法，它的this指向是当前的WebviewScreen这个类，导致onMessage里面this.setSpeechRecognizeMode方法的this指向了WebviewScreen这个类，并不是当前类，而WebviewScreen里面并没有去定义setSpeechRecognizeMode方法，当然是undefined。

export class WebviewScreen {
  ...
    public render() {
        return (
                <WebView
				...
 					onMessage={this.viewModel.onMessage}
				...
 				/>
        )
    }
    
  ...
}

​ 改进：

​ 改用箭头函数，this指向的是当前类的本身，也就是指向的是WebviewScreenViewModel这个类，就不存在undefined的问题。

export class WebviewScreen {
  ...
    public render() {
        return (
                <WebView
				...
 					onMessage={(e) => {
            			this.viewModel.onMessage(e);
          			 }}
				...
 				/>
        )
    }
    
  ...
}