Método jQuery.data() y pérdida de memoria

En la documentación oficial de jQuery , se recuerda a los usuarios que este es un método de bajo nivel y debe ser reemplazado por el método .data() . $.data(elemento, clave, valor) puede adjuntar cualquier tipo de datos a los elementos DOM, pero se deben evitar las pérdidas de memoria causadas por referencias circulares. El texto original es el siguiente:

El método jQuery.data() nos permite adjuntar datos de cualquier tipo a elementos DOM de una manera que esté a salvo de referencias circulares y por lo tanto de pérdidas de memoria. Podemos establecer varios valores distintos para un solo elemento y recuperarlos más tarde:

Pero los problemas con este método no terminan ahí. En JQUERY FORUM, este problema se discutió en profundidad y robert.katic propuso una solución. Si el método $.data() se aplica al objeto host, la operación se optimizará, pero si este método se usa en el objeto local, el resultado puede no ser satisfactorio. En circunstancias normales, un elemento se puede eliminar utilizando el método .remove() y se pueden borrar sus datos respectivos. Pero para los objetos locales, esto no se puede eliminar por completo. Estos datos relacionados continúan hasta que se cierra el objeto de la ventana. Estos problemas también existen en el objeto de evento, porque los controladores de eventos también se almacenan utilizando este método.

Entonces, la forma más sencilla de resolver este problema es almacenar los datos en un nuevo atributo del objeto local. Ahora mismo:

//...
si (elem.nodeType) {
caché[id] = objeto de datos;
elem[expando] = id;
} demás {
elem[expando] = objetodatos;
}
//...

Sin embargo, este método es inútil cuando se trata de cuestiones de herencia. Pruébalo:

var padre = {};
var niñoA = Objeto.create(padre);
var niñoB = Objeto.create(padre);

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

// Esto puede incluso ser intencional
$.datos(niñoA, "foo")
// => "valor principal"
$.datos(niñoB, "foo")
// => "valor principal"

// Esto puede NO ser intencional
$.data( niñoA, "foo", "valor niñoA");
$.data(padre, "foo")
// => "valor niñoA"
$.datos(niñoB, "foo")
// => "valor niñoA"

Al principio, el objeto que almacena los datos no existe, por lo que se crea un objeto para almacenar el nuevo valor, como se muestra en la figura.

Ahora intentamos modificar los mismos datos del objeto niñoA.

El objeto childA no tiene estos datos, por lo que busca la cadena de prototipos. El objeto principal tiene estos datos y su valor se sobrescribe inmediatamente. Por lo tanto, si obtiene el valor de "foo" de los dos objetos padre e hijoB, obtendrá "valor hijoA" en lugar de "valor padre".