Метод jQuery.data() и утечка памяти

В официальной документации jQuery пользователям напоминают, что это метод низкого уровня и его следует заменить методом .data() . $.data(element, key, value) может прикреплять к элементам DOM любые типы данных, но следует избегать утечек памяти, вызванных циклическими ссылками. Исходный текст выглядит следующим образом:

Метод jQuery.data() позволяет нам прикреплять данные любого типа к элементам DOM способом, безопасным от циклических ссылок и, следовательно, от утечек памяти. Мы можем установить несколько различных значений для одного элемента и получить их позже:

Но на этом проблемы этого метода не заканчиваются. На JQUERY FORUM эта проблема подробно обсуждалась, и robert.katic предложил решение. Если метод $.data() применить к хост-объекту, операция будет оптимизирована, но если этот метод используется к локальному объекту, результат может быть неудовлетворительным. В обычных обстоятельствах элемент можно удалить с помощью метода .remove() и очистить соответствующие данные. Но для локальных объектов их нельзя полностью удалить. Эти связанные данные сохраняются до тех пор, пока объект окна не будет закрыт. Эти проблемы существуют и в объекте события, поскольку обработчики событий (обработчики) также сохраняются с помощью этого метода.

Итак, самый простой способ решить эту проблему — сохранить данные в новом атрибуте локального объекта. Прямо сейчас:

// ...
если (elem.nodeType) {
кэш [id] = объект данных;
элемент [расширение] = идентификатор;
} еще {
элемент [расширение] = dataObject;
}
// ...

Однако этот метод бесполезен, если возникают проблемы с наследованием. Попробуйте:

родительский вар = {};
вар childA = Object.create(родительский);
вар childB = Object.create(родительский);

$.data(родительский, "foo", "родительское значение");

// Это может быть даже намеренно
$.data(childA, "foo")
// => "родительское значение"
$.data(childB, "фу" )
// => "родительское значение"

// Это может быть НЕ намеренно
$.data(childA, "foo", "значение childA");
$.data(родительский, "фу" )
// => "значение childA"
$.data(childB, "фу" )
// => "значение childA"

Вначале объекта, хранящего данные, не существует, поэтому создается объект для хранения нового значения, как показано на рисунке.

Теперь мы пытаемся изменить те же данные объекта childA.

Объект childA не имеет этих данных, поэтому он ищет цепочку прототипов. Родительский объект имеет эти данные, и его значение немедленно перезаписывается. Таким образом, если вы получите значение «foo» из двух объектов: родительского и дочернего B, вы получите «значение childA» вместо «родительского значения».