箭头函数this指向的问题
发布于 13天前 作者 summerscar 176 次浏览 来自 问答

这是个使用节流函数的场景

// utils.js
//  节流函数
const throttle = (func, delay) => {
  let timer
  return function () {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {  // 这里用了箭头函数,所以这里面this绑定没错
      func()  //这里如果绑定call(this),并且调用时的函数改为function时this指向没问题
    }, delay)
  }
}
export {throttle }

··· //在组件中使用 methods: { show: throttle(() => { //但是这里如果写成箭头函数(上面的显式绑定就失效了),这里的this 打印出来是{a: {…}}好像是当前组件export出去的对象,并不是vue实例 this.$refs.headerSlide.style.visibility = ‘visible’ this.$refs.headerSlide.style.opacity = 1 }, 300) } ··· 所以传入的函数用箭头函数的this怎么决定出来的?网上都说使用执行上下文的this决定,那么不应该就是utils中使用箭头函数中的this么,还是说因为这里的箭头函数并没有this,再往上一层的方法中的this那还是vue实例呀,怎么会最后出来一个当前组件导出的对象

2 回复

Baidu IME_2017-10-10_16-45-15.jpg 回调写成箭头函数this指向了这个东西

回到顶部