jQuery.data()方法與記憶體洩漏

在jQuery的官方文件中，提示使用者這是一個低階的方法，應該用.data()方法來代替。 $.data( element, key, value )可以對DOM元素附加任何類型的數據，但應避免循環引用而導致的記憶體洩漏問題，原文如下：

The jQuery.data() method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks. We can set several distinct values for a single leaks. We can set several distinct values for a single elter and retrim and retrim.

但對於該方法，存在的問題也不僅於此。在JQUERY FORUM中，對該問題作了深入的討論，robert.katic 提出了一條解決方案。 $.data()方法應用到宿主物件上,運行會得到最佳化，但在本地物件上使用該方法，結果未必盡如人意。一個元素在正常情況下可以使用.remove()方法將其刪除，並清除各自的資料。但對於本地物件而言，這是不能徹底刪除的，這些相關的資料一直持續到視窗物件關閉。同樣，這些問題也存在於event 物件中，因為事件處理器(handlers)也是用該方法來儲存的。

那麼，要解決該問題最簡單的方法是將資料儲存到本機物件新增的屬性之中。即：

// ...
if ( elem.nodeType ) {
cache[ id ] = dataObject;
elem[ expando ] = id;
} else {
elem[ expando ] = dataObject;
}
// ...

但是，一旦涉及繼承問題，該方法就無能為力。試看：

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

$.data( parent, "foo", "parent value" );

// This may even be intentional
$.data( childA, "foo" )
// => "parent value"
$.data( childB, "foo" )
// => "parent value"

// This may NOT be intentional
$.data( childA, "foo", "childA value" );
$.data( parent, "foo" )
// => "childA value"
$.data( childB, "foo" )
// => "childA value"

開始時，儲存資料的物件不存在，因此建立一個物件來儲存新的值，如圖

現在，我們嘗試去修改物件childA同樣的資料。

物件childA並不存在該數據，因此它沿著原型鏈向上查找，父物件剛好擁有該數據，其值立即被改寫。所以，從parent和childB這兩個物件取得“foo”的值，得到的將是“childA value”，而不是“parent value”。