0

Есть 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 элементам у меня на странице? Спасибо.

1
  • c чего ты взял, что Ссылается на testMethods? Добавь пример как ты вызываешь эту функцию
    – Grundy
    27 апр 2019 в 18:08

1 ответ 1

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>

4
  • Спасибо большое! Идея в том, чтобы к некоторым DOM-элементам прикрутить дополнительный функционал, при этом сохранить стандартные методы. Я в своей реализации иду в правильном направлении? 27 апр 2019 в 18:38
  • @IgorCheglakov, ну вообще не очень. Более красивым может стать наследование от элементов. Либо создание функции, в которую элемент будет передаваться. Но тут все зависит от конкретной задачи.
    – Grundy
    27 апр 2019 в 18:54
  • Скажем, есть 10 div-контейнеров, к ним нужно прикрутить функции заполнения стандартным набором span-элементов, изменения текстового содержимого/классов этих span-элементов, их приведения к дефолтному виду + вложенные функции для всего этого. 27 апр 2019 в 19:05
  • @IgorCheglakov, а зачем к ним что-то прикручивать? :) Как минимум два варианта: сделать класс в котором будет поле с контейнером, и его методы будут работать с контейнером как с полем. Сделать свой собственный html-элемент и и добавить туда нужные функции.
    – Grundy
    27 апр 2019 в 19:08

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.