jQuery.data() メソッドとメモリ リーク

jQueryの公式ドキュメントでは、これは低レベルのメソッドであり、 .data()メソッドに置き換える必要があることがユーザーに注意されています。 $.data(element, key, value) は任意のタイプのデータを DOM 要素に添付できますが、循環参照によるメモリ リークを回避する必要があります。元のテキストは次のとおりです。

jQuery.data() メソッドを使用すると、循環参照やメモリ リークから安全な方法で、任意の型のデータを DOM 要素に添付でき、単一の要素に複数の個別の値を設定し、後でそれらを取得できます。

しかし、この方法の問題はそれだけではありません。 JQUERY FORUM では、この問題について詳しく議論され、robert.katic が解決策を提案しました。 $.data() メソッドがホスト オブジェクトに適用される場合、操作は最適化されますが、このメソッドがローカル オブジェクトに対して使用される場合、満足のいく結果が得られない可能性があります。通常の状況では、.remove() メソッドを使用して要素を削除すると、それぞれのデータがクリアされます。ただし、ローカル オブジェクトの場合、これらの関連データはウィンドウ オブジェクトが閉じられるまで保持されます。イベント ハンドラー (ハンドラー) もこのメソッドを使用して格納されるため、これらの問題はイベント オブジェクトにも存在します。

したがって、この問題を解決する最も簡単な方法は、ローカル オブジェクトの新しい属性にデータを保存することです。今すぐ：

// ...
if (elem.nodeType) {
キャッシュ[id] = データオブジェクト;
elem[expando] = id;
} それ以外 {
elem[expando] = データオブジェクト;
}
// ...

ただし、継承の問題が発生すると、この方法は役に立ちません。試してみてください:

var 親 = {};
var childA = Object.create(parent);
var childB = Object.create(parent);

$.data( 親, "foo", "親値" );

// これは意図的なものである可能性もあります
$.data( childA, "foo" )
// => 「親の値」
$.data( childB, "foo" )
// => 「親の値」

// これは意図的ではない可能性があります
$.data( childA, "foo", "childA value" );
$.data( 親, "foo" )
// => "childA の値"
$.data( childB, "foo" )
// => "childA の値"

最初はデータを格納するオブジェクトが存在しないため、図に示すように新しい値を格納するオブジェクトが作成されます。

次に、オブジェクト childA の同じデータを変更してみます。

オブジェクト childA にはこのデータがないため、プロトタイプ チェーンを検索します。親オブジェクトにはたまたまこのデータがあり、その値はすぐに上書きされます。したがって、parent と childB の 2 つのオブジェクトから「foo」の値を取得すると、「親の値」ではなく「子A の値」が取得されます。