Не получается заставить Element.setAttribute работать с webpack / babel - PullRequest
Новая
       11

Не получается заставить Element.setAttribute работать с webpack / babel

0 голосов
/ 28 сентября 2019

У меня есть следующее: 

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 не является функцией

, где n - минимизированное имя элемента, или я так подумал.

enter image description here

Как вы можете видеть на картинке, this кажется Element, но n ... ну, я не знаю, что это.Я делаю это неправильно?

В этот же момент, если я делаю this.draggable = true в консоли , это работает просто отлично ... Вы также можете видеть, что я пытался сделать это вкод, но это тоже не работает.

Есть идеи?

1 Ответ

3 голосов
/ 28 сентября 2019

this, которое вы видите в отладчике, является значением фактическим 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); }
};

См. Также Являются ли «Функции стрелок» и «Функции»'эквивалентный / заменяемый? .

Наконец, расширение прототипов, над которыми у вас есть наименьший контроль - встроенные в браузеры - считается плохой идеей.(Вы можете создать конфликт с будущими расширениями спецификации, например - или с другими библиотеками, которые вы используете.) Отдельная функция обычно работает лучше: 

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