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

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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

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

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

138

javascript