似乎无法让Element.setAttribute与webpack / babel一起使用

Question

我有以下内容：

Element.prototype.makeDraggable = (elem = null) => {
    //this.draggable = true;
    this.setAttribute("draggable", "true");
    this.ondragstart = (e) => { e.dataTransfer.setData("text", elem ? elem.id : e.target.id); }
};

当浏览器进入该功能时，它会在第一行引发错误：

  

Drag.js：7未捕获的TypeError：n.setAttribute不是函数

n是元素的最小名称，或者我认为如此。

如您在图片中看到的，this似乎是Element，但是n是..我不知道它是什么。我做错了吗？

在同一点上，如果我在控制台中执行this.draggable = true ，它就可以正常工作...您还可以看到我尝试在代码中这样做，但这并没有也可以。

有什么想法吗？

Answer 1

在调试器中看到的this是 actual this的值；在源视图中看到的this是n的源映射版本，而n的值并不是您想要的。

您使用了箭头功能，因此得到了词法this。这就是箭头功能的作用。要从通话时间访问this（将方法添加到原型时通常需要这样做），请使用非箭头函数：

Element.prototype.makeDraggable = function (elem = null) {
    //this.draggable = true;
    this.setAttribute("draggable", "true");
    this.ondragstart = (e) => { e.dataTransfer.setData("text", elem ? elem.id : e.target.id); }
};

另请参阅Are 'Arrow Functions' and 'Functions' equivalent / exchangeable?。

最后，扩展您对原型具有最少控制权的内置浏览器是一个坏主意。 （例如，您可能会与以后对该规范的扩展产生冲突，或者与您使用的其他库产生冲突。）独立功能通常会更好地工作：

const makeDraggable = (target, elem = null) {
    target.draggable = true;
    target.ondragstart = (e) => { e.dataTransfer.setData("text", elem ? elem.id : e.target.id); }
};