In-depth understanding of JavaScript var variables and closures

Today I accidentally saw a Nanyi alumni writing about the ES6 new feature let. Let's appearance is to compensate for the lack of var. Thus, write down this blog to revisit the cliché of javascript closures and its scope of criticism.

The concept of closures I will not say, many of the books are explained and interpreted, that is, inside a function can access the outside of the function context. Today's focus is on the following VAR variable. Because in peacetime development, if do not have a very deep understanding of this keyword, it is easy to produce a lot of pits and illusions.

The point of this article is to illustrate the variable defined by VAR, which is scoped within a function body, not in braces {}, which are understood by our other languages.

Here are a few classic examples:

(function () {        var a = [];        for (var i = 0; i < i++) {            var c = i;            A[i] = function () {                console.log (c);            };        }        A[6] (); 9    }) ()

This example, which is somewhat JavaScript-based, is known to all, and is an example that is specifically described in JavaScript good Parts. The output of C in this example is 9 instead of 6.

Explanation: First, in the function a[6], you can access the variable C, and before executing the a[6] function, the value of C is now 9.

Didn't understand what I was saying? Or have I understood the example above? OK, that's okay, let's look at the following example:

(function () {        if (true) {            var a=10;        }        Console.log (a); Output 10 instead of undefined}) ();

In the above example, what is the output? Anyone who learns Java or other mature object-oriented languages may think that the output is undefined. But, to disappoint you, the output is really 10.

Don't understand? This is a time to recap what I said at the outset: "Variables defined by Var, which are scoped within a function body rather than braces {} understood by our other languages." "Isn't that a lot clearer?"

Similarly, in the example below, the output is 10, not 5:

Function F1 () {  var n = 5;  if (true) {      var n = ten;  }  Console.log (n); 5}

This is why there is a let keyword in the new ES6 feature. Let's scope is block-level (not function-level), as is the scope of other languages that we traditionally understand.

Well, after understanding, let's do a little exercise:

(function () {        var n=1;        var arr=[];        var arr2=[];        for (Var i=0;i<10;i++) {            var c=i;            Arr[i]=function () {for                (var j=0;j<4;j++) {                    c=c+10;                    Arr2[j]=function () {                        console.log (c);                    }                }                return c;            }        }        Console.log (' C: ' +c); C=9        Console.log (Arr[6] ());  c=49        //console.log (' C: ' +c);//c=49        arr2[3] ();//c=49    }) ();

Do you understand the output of the above two places C? In fact, personally think this is a big hole in JavaScript. It is easy to confuse people who do not understand thoroughly.

In addition, see Nanyi var && let for the big God:

http://es6.ruanyifeng.com/#docs/let

In-depth understanding of JavaScript var variables and closures