this 指向踩坑总结

Grace糖衣

一. 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)
阅读 265

用于记录一些平时遇到的问题

1 声望
1 粉丝
0 条评论
你知道吗?

用于记录一些平时遇到的问题

1 声望
1 粉丝
宣传栏