乐趣区

关于javascript: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)
退出移动版