8-7： handleTouchMove（）

来源：8-7 Vue项目城市选择页 - 列表性能优化

路人zl

2019-01-17

您好老师：
8-7项目中，函数利用setTimeout()延时优化，在箭头函数中，为什么 this 指向没有发生绑定丢失的现象呢？我想了下原因，不知道我说的对不对，箭头的 this 指向其实是引用它的父级作用域中的 this, 工具函数 setTimeout() 又是被 handleTouchMove函数调用，但是 handleTouchMove 的引用又是被 Vue 实例包含，所以 setTimeout() 中的箭头函数引用的 this 并没有发生改变。但是为什么有时候用到箭头函数的时候 this 又会改变呢？
handleTouchMove( ev ){

    if( this.touchStatus ){
      if( this.timer ){
        clearTimeout( this.timer );
      }
      this.timer = setTimeout( () => {
        const touchY = ev.touches[0].clientY - 79; /* 手指移动时距离最顶部元素的高度 */
        const index = Math.floor( ( touchY - this.startY ) / 20 );
        if( index >= 0 && index < this.letters.length ){
          this.$emit( 'changeIndex', this.letters[ index ]);
        }
      }, 16 );
    }
  }
  还请老师不吝赐教，万分感谢！

写回答

2回答