javascript - 这个关键字变成错误的this

Question

onScroll函数内的所有this关键字都变成了错误的this，在函数内部它变成了window这是有道理的。我想使用 => 表示法来保留 this 但在这种情况下，我似乎无法找出正确的语法，或者甚至无法找出正确的位置。

由于某些奇怪的原因，将 this 存储在 public self = this 中也不起作用，但我更喜欢使用 => 的解决方案>

这是类(class):

export class ScrollXDirective implements AfterContentInit {
  @ContentChild(FormDatepickerPresetsComponent) presets: FormDatepickerPresetsComponent;

  public posX: number = 0;
  public offset: number = 35;

  constructor(private _renderer: Renderer, private _elementRef: ElementRef) {}

  ngAfterContentInit() {

    let wrapper: HTMLElement = this.presets.presetsWrapperElement.nativeElement;
    let scrollHandler: string = 'DOMMouseScroll' in window ? 'DOMMouseScroll' : 'mousewheel';   

    this._renderer.listen(wrapper, scrollHandler, _.debounce(this.onScroll, 200));
  }

  onScroll(e: any) {

    e.preventDefault();

    let delta = (e.type === 'DOMMouseScroll' ? e.detail * -40 : e.wheelDelta);

    let list: HTMLElement = this.presets.presetsListElement.nativeElement;
    let totalWidth = list.offsetWidth;

    if (delta > 0) {

      if (this.posX >= 0) {
        return false;
      }

      this.posX = this.posX + this.offset;

      this._renderer.setElementStyle(list, 'margin-left', this.posX + 'px');
    }
    else {

      let listX = list.getBoundingClientRect().right;
      let hostX = this._elementRef.nativeElement.getBoundingClientRect().right;

      if (listX <= hostX) {
        return false;
      }

      this.posX = this.posX - this.offset;

      this._renderer.setElementStyle(list, 'margin-left', this.posX + 'px');
    }
  }
}

Answer 1

我认为它应该有效:

 _.debounce(this.onScroll.bind(this), 200)

另请参阅文档 bind

另一种方式:

onScroll = (e: any) => {
  ...
}