How does the interpreter handle the local function referenced by the global object?

Question

window.onload = function() { var a = function(x) { console.log(x); }; document.onclick = function() { a(1); }; document.onkeyup = function() { a(2); }; }; 

I understand why this works, but not like that.

When window.onload completes, a destroyed, but the function it refers to is still available to event handlers because it was declared in a higher scope, if I understand it correctly.

Does the interpreter support a hidden function reference in the background, or does the interpreter somehow embed the function? Is this type of code to avoid an effective global variable? Thanks.

Answer 1

Does the interpreter provide a hidden reference to the function in the background, or does the interpreter somehow embed the function?

Unable to respond globally for all javascript engines. But the parser will most likely need to reference your function a for the anonymous functions that you define on document.onclick and document.onkeyup . Thus, a not immediately destroyed, it is not available only for javascript scope constraints.

This is why faults can lead to memory leaks, because it is really wise for a motor to play a . (which was a problem with the IE engine and is still not handled carefully). And since you cannot dereference a manually because you do not have access to the variable, quick fixes for memory leaks arising from this type of pattern do not exist.

Your example is also not closure , because it does not return a function, but deals with the same kind of problems with a variable scope, because it refers to the local variable a inside functions that do not use the same scope ( document.onclick and document.onkeyup ) .

I very much suspect that not a single engine will try to inline function a , as this unnecessarily duplicates the function object. Most likely, it is stored with pointer , and the specified reference counter can be easily destroyed as soon as the reference counter is 0 (in your example, when document.onclick and document.onkeyup dereferenced (set to null or undefined ).

Is this type of code to avoid an effective global variable?

Avoiding global variables is always helpful, so overall: yes, this is an effective way to avoid global variables. Every good engine must also destroy a once document.onclick and document.onkeyup dereferenced.

Answer 2

When window.onload completes, a destroyed ...

This assumption is incorrect. Whenever you create functions inside another function, these internal functions block the garbage collector from clearing the scope of the external function.

Recommended reading: http://www.ibm.com/developerworks/web/library/wa-memleak/

Answer 3

This is known as "Closing." In short, this means that "the function has access to all the variables in the area in which it is defined."

In your example, two handlers are defined inside the window.onload function, so it can access a , which is also in this area.

And yes, the interpreter stores all closures in memory. (AFAIK)
I am not a professional programmer, so I do not have a lot of authority. But I usually do this to avoid global bindings.

Closing MDN

Answer 4

This is not a complete answer to your question, but if it helps ... the lifetime of an object in Javascript is usually controlled by reference counting.

The language does not actually have a concept of a block area (although it does have a functional area). Objects are automatically cleared by the background GC only when no links remain. Thus, the behavior of your object a is inherently “safe”: one link is discarded when the scope expires and the other remains.

A more detailed answer would be to intricately study the specific implementation of the Javascript engine, most likely the detail is larger than we have time or space for here.

Answer 5

Functions or references to them in a variable in javascript are an object type and just like ordinary objects, functions or variables that contain references to them, they do not collect garbage until there are no references to them. In your specific case, you have created a couple of links to a() that last longer than the .onload() handler. Therefore, the variable a lasts much longer than the function. This concept is known as closure.

If you are looking for the term "javascript closure" on Google, you will find many useful articles on this subject, such as this one .

Answer 6

An object or a context object is automatically created by JavaScript at the moment when you declare the first function inside the window.onload handler; this region object stores the variable a , effectively making it exclusive to both of your anonymous functions.

This method is often used to hide information and prevent the creation of global variables. Once the onload code is running, no other code has access to a .