Deep parsing of JavaScript closures

Source: Internet
Author: User
Tags closure

First give an example:

function Pfnouter () {    var num=999;     function Pfninner () {        alert (num);    }     return Pfninner;} var test=pfnouter (); test ();         // 999
View Code

The Pfninner function in the above example is the closure, and the simple understanding of closure is the function that can read the variables inside other functions. Since only a child function inside a function in JavaScript can read a variable inside a function, the closure can also be easily understood as a function defined inside a function, and a closure is a bridge that links the inside of the function to the outside of the function.

Closures have 2 major functions: One is to read the variables inside the function, and the other is to keep the variables in memory. One more example:

function pfnout () {    var num=999;    Nadd () {        num++    ;    } function Pfninner () {        alert (num);    }     return Pfninner;} var test=pfnouter (); test ();         // 999 Nadd (); test ();         //  +
View Code

Test is actually the closure function Pfninner, it runs 2 times, the first time is 999, the second is 1000; this is enough to prove that NUM is always in memory and not released after the Pfninner function call is complete, so you can implement a static variable similar to C + +.

Let us in-depth analysis of the principle, Pfnouter is Pfninner's parent function, and pfninner assignment to a global variable, which leads to Pfninner always in memory, and Pfninner depends on Pfnouter, So Pfnouter is always in memory and will not be recycled.

It's also worth noting that in JavaScript, if you declare a local variable, you need the Var key, otherwise you think the variable is a global variable, so the Nadd in the above code is a global variable, the value of Nadd is an anonymous function, and the anonymous function itself is a closure, So nadd can manipulate the variables of the function outside of the function.

Obviously, the use of closures requires a few caveats:
1. The abuse of the closure caused the memory can not be released, in IE, it is easy to create a memory leak, the solution is to exit the function is not to use the variable to all delete, that is, the unnecessary variable is assigned to NULL;
2. The closure function modifies the variables inside the parent function outside the parent function, so if the parent function is used as an object, the closure is used as a common method, and the variables inside the parent function are treated as private variables, it is important to be careful to call the closure function to modify the internal variables.

Summarize the closures:
When an intrinsic function is referenced outside the scope that defines it, the inner function's closure is created, and if the intrinsic function references a variable that is located outside the function, when the external function is called, the variables are not freed in memory because the closures require them.

When it comes to closures, referring to JavaScript memory leaks, let's briefly talk about the memory release of JavaScript, where an object is not referenced in JavaScript [such as assigning the object to null], and the garbage collection period reclaims the variable. If 2 objects refer to each other, such as the closure relationship, the 2 variable objects are freed if the 2 variables are not referenced elsewhere.

Deep parsing of JavaScript closures

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.