this 指向踩坑总结

一. vue 中使用回调函数使用 this 无效

踩坑场景：vue 实例中绑定 data 的 this 无效
解决方式：

1. 使用箭头函数解决
2. let self = this

二. react 中使用回调函数使用 this 无效

踩坑场景：react 内部组件调用时传入函数参数时，this 指向不对导致函数执行时机不对
解决方式：在函数传参时使用箭头函数（也有别的方法，不过此种最方便）

三. setTimeout 使用 this 失效

踩坑场景：vue，小程序
解决方式：

1. setTimeout 内使用箭头函数
2. let self = this

四. mobx 使用 this 失效

解决办法：
1.在 this 调用的当前函数中使用 @action.bound

官网原文：
action 装饰器/函数遵循 javascript 中标准的绑定规则。 但是，action.bound 可以用来自动地将动作绑定到目标对象。 注意，与 action 不同的是，(@)action.bound 不需要一个name参数，名称将始终基于动作绑定的属性
注: action.bound 不要和箭头函数一起使用；箭头函数已经是绑定过的并且不能重新绑定

class Ticker {
    @observable tick = 0

    @action.bound
    increment() {
        this.tick++ // 'this' 永远都是正确的
    }
}

const ticker = new Ticker()
setInterval(ticker.increment, 1000)