jQuery.data() 메서드 및 메모리 누수

jQuery 의 공식 문서에서는 이것이 낮은 수준의 메서드이므로 .data() 메서드로 대체되어야 한다는 점을 사용자에게 상기시킵니다. $.data(element, key, value)는 모든 유형의 데이터를 DOM 요소에 연결할 수 있지만 순환 참조로 인한 메모리 누수는 피해야 합니다. 원본 텍스트는 다음과 같습니다.

jQuery.data() 메소드를 사용하면 순환 참조 및 메모리 누수로부터 안전한 방식으로 모든 유형의 데이터를 DOM 요소에 연결할 수 있습니다. 단일 요소에 대해 여러 고유 값을 설정하고 나중에 검색할 수 있습니다.

하지만 이 방법의 문제점은 여기서 끝나지 않습니다. JQUERY FORUM에서는 이 문제에 대해 심도 있게 논의되었고, robert.katic이 해결책을 제안했습니다. $.data() 메소드를 호스트 객체에 적용하면 작업이 최적화되지만 로컬 객체에 이 메소드를 사용하면 결과가 만족스럽지 못할 수 있습니다. 일반적인 상황에서는 .remove() 메서드를 사용하여 요소를 삭제하고 해당 데이터를 지울 수 있습니다. 그러나 로컬 개체의 경우에는 완전히 삭제할 수 없습니다. 이러한 관련 데이터는 창 개체가 닫힐 때까지 계속됩니다. 이벤트 핸들러(handler)도 이 메서드를 사용하여 저장되기 때문에 이러한 문제는 이벤트 객체에도 존재합니다.

따라서 이 문제를 해결하는 가장 쉬운 방법은 로컬 개체의 새로운 속성에 데이터를 저장하는 것입니다. 지금 바로:

// ...
if (elem.nodeType) {
캐시[id] = 데이터객체;
elem[expando] = 아이디;
} 또 다른 {
elem[expando] = dataObject;
}
// ...

그러나 상속 문제가 관련되면 이 방법은 쓸모가 없습니다. 시도해 보세요:

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

$.data( parent, "foo", "부모 값" );

// 의도적인 것일 수도 있음
$.data( childA, "foo" )
// => "부모 값"
$.data( childB, "foo" )
// => "부모 값"

// 의도한 것이 아닐 수도 있습니다.
$.data( childA, "foo", "childA 값" );
$.data(부모, "foo" )
// => "childA 값"
$.data( childB, "foo" )
// => "childA 값"

처음에는 데이터를 저장하는 객체가 존재하지 않기 때문에 그림과 같이 새로운 값을 저장하기 위한 객체를 생성합니다.

이제 childA 객체의 동일한 데이터를 수정하려고 합니다.

childA 객체에는 이 데이터가 없으므로 프로토타입 체인을 조회합니다. 상위 객체에 이 데이터가 있으면 해당 값이 즉시 덮어쓰여집니다. 따라서 parent 및 childB 두 개체에서 "foo" 값을 얻으면 "부모 값" 대신 "childA 값"을 얻게 됩니다.