为什么需要@autobind

在 vue 模版中直接使用服务的方法会导致丢失 this。

<script lang="ts" setup>
class Service {
  public id = 1;
  public increace(res) {
    // 如果丢失this，会导致this.id抛出异常
    this.id++;
  }
}
const service = new Service();
</script>
<template>
  <button @click="service.increace"></button>
</template>

在 fetch 方法的 then 回调函数中直接使用服务的方法会导致丢失 this。

class Service {
  public id = 1;
  public log(res) {
    // 如果丢失this，会导致this.id抛出异常
    console.log(this.id, res);
  }
}
const service = new Service();

fetch('api_url')
  .then(res => res.json())
  .then(service.log);

示例 1

class A {
  id = 1;

  public hello() {
    console.log(this.id);
  }
}

这里的 hello 方法如果在上述 2 个丢失 this 的场景中使用，就会发生异常。

示例 2

class A {
  id = 1;

  constructor() {
    this.hello = this.hello.bind(this);
  }

  public hello() {
    console.log(this.id);
  }
}

这里已经在 constructor 方法中提前手动绑定了 hello 方法，所以不会再丢失 this。

示例 3

import autobind from 'autobind-decorator';

class A {
  id = 1;

  @autobind
  public hello() {
    console.log(this.id);
  }
}

这里是通过@autobind装饰器来绑定的 hello 方法，效果和示例 2相同，但是更加方便。

安装命令：npm install autobind-decorator

autobind-decorator 文档