微信小程序有没有避免频繁使用"const that = this"的技巧？

Question

微信小程序const that = this的疑问
我看微信小程序异步方法回调的时候，有很多const that = this
查了资料，说是因为原方法page调用，回调方法框架调用，this变了，所以用that来保留page
那么有没有什么办法避免掉回调里频繁出现的const that = this？

希望能有个方便的、框架式的解决办法
——————
已经解决了，箭头函数神无敌！
我以前都不喜欢这类后来的写法，都很传统的用success: function() {...}
今天这个问题刷新了我的认知，我以后就用success: () => {...}了

Answer 1

就是使用 🔗箭头函数 来保持后续业务代码的 this 指向是上层作用域中的 this。

比如说，我们在一些 wx.xx 之类API的回调中使用：

page() {
  scanCode() {
    wx.scanCode({
      scanType: ['qrCode'],
      success: (res) => {
        console.log('获取扫码结果', res);
        this.setData({
          qrCode: res.result
        })
      },
      fail: (err) => {
        console.log('扫码失败', err);
      }
    });
  }
}

就不需要在外部在定义一个 const that = this 了。

在非小程序开发的时候也会有遇到这样的情况，也可以使用 箭头函数 改写回调函数

export default {
  ...
  methods: {
    onDeleteConfirm (id) {
      const that = this;
      this.$confirm({
        title: "确认删除",
        content: "是否删除选中文件?",
-       onOk: function () {
-          that.submitDeleteAction(id)
-       }
+       onOk: () => {
+          this.submitDeleteAction(id)
+       }
      })
    }
  }
}

---

很早之前 react 中也会使用 .bind() 或者 箭头函数 来指定 this 指向。

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

Handling Events – React

Answer 2

闭包

(function(){
    // code 
}).call(this)