javascript - 似乎无法让 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 Uncaught TypeError: n.setAttribute is not a function

其中 n 是元素的缩小名称，至少我是这么认为的。

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

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

有什么想法吗？

Answer 1

您在调试器中看到的 this 是实际 this 值；您在源代码 View 中看到的 this 是 n 的源映射版本，并且 n 的值不是您想要的值是。

您使用了箭头函数，因此您得到了词法this。这就是箭头函数的作用。要从调用时访问 this(向原型(prototype)添加方法时通常的目的)，请使用非箭头函数:

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? .

最后，扩展您最无法控制的原型(prototype)(浏览器内置程序)被认为是一个坏主意。 (例如，您可能会与规范的 future 扩展或您使用的其他库产生冲突。)独立函数通常效果更好:

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