Método jQuery.data() e vazamento de memória

Na documentação oficial do jQuery , os usuários são lembrados de que este é um método de baixo nível e deve ser substituído pelo método .data() . $.data(element, key, value) pode anexar qualquer tipo de dados aos elementos DOM, mas vazamentos de memória causados ​​por referências circulares devem ser evitados. O texto original é o seguinte:

O método jQuery.data() nos permite anexar dados de qualquer tipo a elementos DOM de uma forma segura contra referências circulares e, portanto, contra vazamentos de memória. Podemos definir vários valores distintos para um único elemento e recuperá-los posteriormente:

Mas os problemas deste método não param por aí. No JQUERY FORUM, esse problema foi discutido em profundidade e robert.katic propôs uma solução. Se o método $.data() for aplicado ao objeto host, a operação será otimizada, mas se este método for utilizado no objeto local, o resultado pode não ser satisfatório. Em circunstâncias normais, um elemento pode ser excluído usando o método .remove() e seus respectivos dados apagados. Mas para objetos locais, isso não pode ser completamente excluído. Esses dados relacionados continuam até que o objeto janela seja fechado. Esses problemas também existem no objeto de evento, porque os manipuladores de eventos (manipuladores) também são armazenados usando este método.

Portanto, a maneira mais fácil de resolver este problema é armazenar os dados em um novo atributo do objeto local. Agora mesmo:

// ...
if (elem.nodeType) {
cache[id] = dataObject;
elemento[expandindo] = id;
} outro {
elemento[expandindo] = dataObject;
}
// ...

No entanto, este método é inútil quando estão envolvidos problemas de herança. Experimente:

var pai = {};
var filhoA = Object.create(pai);
var filhoB = Object.create(pai);

$.data(pai, "foo", "valor pai");

//Isso pode até ser intencional
$.dados(filhoA, "foo")
// => "valor pai"
$.dados(filhoB, "foo")
// => "valor pai"

//Isso pode NÃO ser intencional
$.data(filhoA, "foo", "valor filhoA");
$.data(pai, "foo")
// => "valor filhoA"
$.dados(filhoB, "foo")
// => "valor filhoA"

No início, o objeto que armazena os dados não existe, então é criado um objeto para armazenar o novo valor, conforme mostrado na figura

Agora, tentamos modificar os mesmos dados do objeto childA.

O objeto childA não possui esses dados, então ele procura a cadeia de protótipos. O objeto pai possui esses dados e seu valor é imediatamente substituído. Portanto, se você obtiver o valor "foo" dos dois objetos pai e filhoB, obterá o "valor filhoA" em vez do "valor pai".