Easy to understand JavaScript closures

Helow, Hello, let's talk about JavaScript closures today.

What is a closure package

The official explanation is too abstract to say here, let's take a look at the code first.

function A () {    function  B () {        console.log ("hellow closure");    }     return B;} var C = A (); C (); // Hellow Closure Package

Well, at a glance, this is one of the simplest closures. Simply put, "the sibling variable C of function A refers to function B inside function A", how, is not suddenly understand it.

The role of closures

Before we talk about the function of closures, we first understand the scope of JavaScript variables and the garbage collection mechanism of JavaScript (Gc:garbage collecation).

There are two types of variables: global variables and local variables.

The special thing about JavaScript is that the global variables can be read directly inside the function.

var num = 0; function A () {    console.log (num); // 0 }a ();

However, a local variable inside the function cannot be read outside the function.

function A () {    var num = 0;} A (); Console.log (num); // Error

We sometimes need to get local variables within the function, which is normally impossible, so we need to make a change, in other words, in the inside of the function, and then define a function.

function A () {    var num = 0;     function Getnum () {        console.log (num);    }     return getnum ();} A (); // 0

By the end of the scope, and then the JavaScript garbage collection mechanism (gc:garbage collecation), we typically use new to create objects, and the GC is responsible for reclaiming objects that occupy memory areas. When the GC reclaims memory, it first determines whether the object is referenced by another object. The object memory area is freed if no other object reference is determined, and the object is kept in memory.

function A () {    var num = 0;    Num+ +;    Console.log (num);} A (); // 1 A (); // 1 A (); // 1

OK, now let's look at the code for a closure.

function A () {    var num = 0;     function Addnum () {        num+ +;        Console.log (num);    }     return Addnum;} var C = A (); C (); // 1 C (); // 2 C (); // 3

See, here C is actually the function addnum, so it gets the value inside function A.

And because C refers to Addnum, and addnum is defined inside a, the GC does not reclaim A,num variables that are not released after each C run is finished.

So, the main function of closure is two, the first function is: can read the variables inside the function. the second function is to keep the values of these variables in memory.

Precautions

Because closures can cause variables in the function to be stored in memory, which can result in a large memory consumption, it is not possible to abuse closures, which can cause Web page performance problems. The workaround is to remove the unused local variables before exiting the function, for example, "num = undefined", and easily add pleasure.

Original articles, welcome to reprint, due to the author's limited level, will update the knowledge points and correct some errors, so reproduced please retain the original source, in order to avoid the misleading knowledge of old mistakes.

Original address: http://www.cnblogs.com/dongguoqiang/

Easy to understand JavaScript closures