Question

我正在过渡到角度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，但是当我在第二个函数中访问它时，即使使用精彩箭头函数，我得到{{ 1}}。为什么呢？

这里是不是使用了箭头功能来确保我访问正确的上下文并访问正确的变量？我必须对OO javascript有一个基本的误解，因为我认为这应该有用。

由于

编辑1

我也尝试过不使用IIFE来调用它：

undefined

Answer 1

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

如果要修改处理程序中的对象，则需要将其提供给处理程序。

通过闭包，绑定参数或绑定目标。

e.g。

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>

Answer 2

您不需要创建IIFE

MyListDirectiveController

处理ES6类中的上下文

2 个答案: