This в функции ссылается разные объекты

120
15 ноября 2020, 19:50

Есть html документ, в котором есть один div id="target"

<html>
<head>
</head>
<body>
<div id="target"></div>
</body>

Для него создан прототип testMethods, который содержит специальный набор методов для этого div

var testMethods = {}
testMethods.__proto__ = HTMLDivElement;
target.__proto__ = testMethods;

testMethods содержит метод hello, который должен добавить элемент span к объекту target

testMethods.hello = function (){
    let textElement = document.createElement('span');
    textElement.textContent = "Hello world!";
    console.log(this); /*Выводит в консоль объект target, то что мне и надо:   <div id="target"></div>*/
    this.appendChild(textElement); /*Ошибка: typeError: this.appendChild is not a function. Ссылается на testMethods*/ 

}

Почему this в данном случае ссылается на разные объекты? Как мне правильно прикрепить потомка span к родителю target через функцию? Правильная ли у меня идея о том, чтобы через прототипы придать дополнительный фукнционал отдельным DOM элементам у меня на странице? Спасибо.

Answer 1

Ошибка заключается в неверной установке прототипа.

Чтобы приведенный код заработал, прототипом должен быть объект имплементирующий интерфейс HTMLDivElement. В данном же случае в качестве прототипа устанавливается сама функция, у которой действительно нет указанного свойства.

Для решения достаточно заменить строку 

testMethods.__proto__ = HTMLDivElement;

На 

testMethods.__proto__ = target.__proto__;

В которой в прототип testMethods записывается уже существующий прототип target.

Пример:

var testMethods = {} 
testMethods.__proto__ = target.__proto__; 
target.__proto__ = testMethods; 
 
testMethods.hello = function() { 
 
  let textElement = document.createElement('span'); 
  textElement.textContent = "Hello world!"; 
  this.appendChild(textElement);  
} 
 
target.hello();
<div id="target"></div>

READ ALSO
Создание DOM-элементов в Jquery
javascript

Создание DOM-элементов в Jquery

Как следует добавлять новые элементы на страницу используя Jquery?Или же лучше добавлять элементы через чистый JavaScript и только потом взаимодействовать...

 176
Как добавить условия в калькулятор?
javascript

Как добавить условия в калькулятор?

Есть калькулятор стоимости постройки домаСейчас он просто умножает площадь дома на стоимость работ, которая указана в скрипте

 198
В IE не работает оператор spread (…). Как адаптировать JS-код для IE или сделать на JQuery?
javascript

В IE не работает оператор spread (…). Как адаптировать JS-код для IE или сделать на JQuery?

Во всех браузерах работает, а в IE - синтаксическая ошибка

 150
Как сделать колонки между блоками?
CSS

Как сделать колонки между блоками?

как сделать такие вот колонки между блоками?

 164