Есть ли опасность в использовании HTML-объекта в качестве атрибута «имя» в объекте JavaScript?

Question

при связывании объектов javascript с html-объектами

// javascript element
var element = { tag:'input', name: 'email', value:null, dom: null,
   verifyFunc: function() {...}, postFunc: function() {...},
   rcdElement: some_element }

// lookup javascript element from dom
var doms = {};

// create html element for dom
var item = document.createElement(element.tag);
item.name = element.name;
...

// cross-link
doms[item] = element;
element.dom = item;

// using it in generic "onchange" trigger
function changeTrigger(e) {
  var el = doms[e.target];
  ....
};

Есть ли какие-нибудь опасности в этом подходе?

Answer 1

Ключи объекта являются строками. Таким образом, когда вы пытаетесь использовать объект DOM в качестве ключа объекта, он вызывает toString() для объекта DOM и использует его в качестве ключа. toString() в объектах DOM возвращает неуникальные вещи, подобные этому:

[object HTMLParagraphElement]

Итак, это не приведет к ошибке, но, вероятно, не будет делать то, что вы хотите. Вероятно, было бы более целесообразно использовать идентификатор объекта в качестве ключа и генерировать уникальный идентификатор для объекта, если у объекта еще нет идентификатора.

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

Answer 2

Когда я запускаю это в Firefox 10:

window.onload = function(){
    var doms = {},
        item,
        element = { 
            tag: 'input', 
            name: 'email', 
            value: null,
            dom: null
        };

    for (var i = 0; i < 10; i++) {
        item = document.createElement(element.tag);
        item.name = element.name + i;
        document.body.appendChild(item);

        doms[item] = element;
    }

    console.log(doms);
};

В консоли Firebug я вижу следующее:

Object { [object HTMLInputElement]={...}}

Что расширяется до:

[object HTMLInputElement]   Object { tag="input", name="email", value=null, more...}

dom                         null

name                        "email"

tag                         "input"

value                       null

http://jsbin.com/efuluk/

Обратите внимание, что есть только одна пара ссылка / объект, а не десять. Я подозреваю, что вы не можете сделать это, и я все равно советую против этого (вместо конкретной цитаты, поддерживающей мою догадку).