Learning Javascript: The Next Day

Since the topic has come up, I'm also have a a close read at the way you've created your OOJS framework for ActiveWidgets.

My question for the day is this:

I saw this comment:
'// break object reference to avoid memory leak
el = null;"

and I noticed you grabbed a new reference to header.element() for all the internal functions and discarded it when you finished by setting it to null.

I was wondering what's the memory leak you refer to?

Is it something to do with the nature of closures in JS i.e. a reference to private members still exists and is available to internal functions after the outer function is completed? Does this leak memory?

Yes, you are right, it is related to closures. The event handler closure creates circular reference, which includes ActiveX object (DOM element, where the event handler is attached) as part of the chain.

JavaScript garbage collector cannot resolve circular references, which include both ActiveX and native JavaScript objects. As a result those objects are never destroyed, so we can get memory leak and nasty side effects.

As a rule one should avoid keeping references to ActiveX objects from JavaScript or at least never have both the reference from JavaScript object to ActiveX object and back from ActiveX object to JavaScript objects. Typical case is DOM element (ActiveX) having a JS event handler which refers back to the DOM element either directly or through closures.

Back to your last question - closures do not leak memory by themselves but be very careful when you mix them with ActiveX objects.

Here is a very good article about JS closures:

http://www.jibbering.com/faq/faq_notes/closures.html

(which also has a section about IE memory leak at the end :-)