Почему прототип HTMLElement совместно использует свойства со всеми экземплярами, а не создает копии для каждого элемента?

Question

Я работаю с HTMLElement.prototype, потому что я хочу добавить настраиваемые свойства к своим элементам для работы. Например, я настраиваю хранилище, в котором сохраняются свойства: ключи значений, связанные с ЭТИМ элементом.

Проблема в том, что при настройке свойств в HTMLElement.prototype эти свойства используются совместно со ВСЕМИ экземплярами, и это очень неправильно.

HTMLElement.prototype.storage = {};
HTMLElement.prototype.store = function(prop, val) {
  this.storage[prop] = val;
}
HTMLElement.prototype.retrieve = function(prop) {
  return this.storage[prop];
}

window.onload = function() {
  var box = document.getElementById("box");
  var box2 = document.getElementById("box2");

  box.store("a", "a value");
  console.log(
    box2.retrieve("a")
  );
}

Я ожидаю, что элемент box2 не обладает свойством "a" в своем хранилище, потому что я не установил его для ЭТОГО элемента. Вместо этого я установил его для элемента box.

Answer 1

хранилище свойство определяется на прототипе HTMLElement , оно по определению «видно всеми объектами через цепочку прототипов» .

Вы можете определить метод store(prop, val): void в прототипе HTMLElement, и обычно свойства для каждого экземпляра определяются в функции constructor .

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

HTMLElement.prototype.store = function (key, val) {
 if (!this.storage) {
   this.storage = {};
 }
 this.storage[key] = val;
}

HTMLElement.prototype.getFromStore = function (key) {
 return this.storage ? this.storage[key] : undefined;
}

document.getElementById('one').store('test', 1);
document.getElementById('two').store('test', 2);

// Display stored values for each div element
document.body.innerHTML = Array.prototype.slice.call(document.querySelectorAll('div'), 0).map((el) => `${el.id}: ${el.getFromStore('test')}`).join(',');

<div id="one"></div>
<div id="two"></div>

HTMLElement.prototype.store = function(prop, val) {
    if (!this._storage) {
        this._storage = {};
    }
    this.storage[prop] = val;
}