javascript - 处理 ES6 类中的上下文

Question

我正在过渡到 Angular 2 领域，并决定创建一个拖放组件。所以:

我有几个变量，其指定类型定义如下:

export class UploadComponent {
  image: Blob;
  reader: FileReader;
  ele: Element;
  cols: NodeList;
  dragSrcEl: Object;

  ...
}

我有几个函数附加到它们相应的监听器 - 这是有问题的两个函数:

handleDragStart(e) {
    e.target.classList.remove('opaque');
    (() => { this.dragSrcEl = e; } )();

    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/html', this['innerHTML']);
  }

和

handleDrop(e) {
    if(e.stopPropagation)
      e.stopPropagation();

    console.log('this -> '+this );
    console.log('dragSrcEl -> '+(() => { this.dragSrcEl })());
  }

因此，当用户开始拖动元素时，我们将 this.dragSrcEl 类变量设置为 e，但是当我在第二个函数中访问它时，即使使用很棒的箭头函数，我得到了未定义。为什么？

这里使用箭头函数还不足以确保我访问正确的上下文并访问正确的变量吗？我一定对 OO javascript 有一个根本性的误解，因为我认为这应该可行。

谢谢

编辑 1

我也尝试过不使用 IIFE 来调用它，如下所示:

this.dragSrcEl = e;

Answer 1

作为事件处理程序绑定(bind)到 DOM 事件的函数的目标是源 DOM 节点本身。

如果您想修改处理程序中的对象，则需要使其可供处理程序使用。

通过闭包、绑定(bind)参数或绑定(bind)目标。

例如

element.addEventListener('dragstart', onDragStart.bind(myComponent));

var button = document.querySelector('#my-button');
button.addEventListener('click', onClick);

function onClick() {
    console.log(this);
}

<button id="my-button">Click Me</button>