Scopes and closures in JavaScript

First of all, the strong Amway "You do not know JavaScript", JS beginner advanced must read.

For beginners from static languages like C + + and Java to JavaScript (for example, I), JS some distinctive and very important features make it seem very strange and elusive, for this must be a great effort, while chewing the book while practicing to understand these concepts thoroughly, Before we can talk about further learning the front-end posture. (Note: JS in this article to ECMAScript 5 (ES5), the new features of ES6 I have just contact, I hope that in the future to study with you. ）

Familiar with Java children's shoes in the beginner JS, you must keep in mind one thing:

There is no block-level scope in JS!

{    var test=10;} Console.log (test);     // Console output: Ten

Nani? Does it look awkward? And the more The pit daddy:

var obj={    test:ten,    myFunc:function() {        console.log (test);     }};o Bj.myfunc ();    // An error occurred, or the IDE directly alerted

The same object, their own functions do not recognize their own properties?

It's really.

For beginners, it can be argued that JS has only one scope, the function scope, except the global scope. (a try catch{} statement can also define scopes, but I haven't actually used them so far.)

That is, the variables written in the function body, as long as they are not nested in deeper functions, are in the same scope, "visible to each other", while the other curly braces, whether for the followed, if followed, or the object literal, are "not count", do not define the scope of the effect, Variable declarations are written inside or outside the curly braces.

What is the scope of the nested function? They enjoy the privilege of "one-way transparency", which means that variables in the outer-level scope can be accessed within the scope of the higher level, and vice versa.

 function   Outerfunc () { for  (var  i=0;i<10;i++) {dosomething    ;} Console.log (i);  //  console output 10, because I is in the scope of Outerfunc  Span style= "color: #0000ff;"    >var  outer = 10;  function   Innerfunc () { var  inner = outer; //   Console.log (inner);  //  error, outer scope cannot access variable } in inner scope 

To analyze the previous example. We tried to access test within the scope of the MyFunc, but the test was not a variable "in the same object scope as MyFunc", there was no object scope at all, and test was a property of obj, not a "standalone" variable. To access test, you can only use the dot operator obj.test or obj["test", even inside MyFunc. Of course, the MyFunc internally has access to obj, a variable in the outer scope, with no problem. The code is then rewritten as follows:

var obj={    test:ten,    myFunc:function() {        console.log (obj.test) ;     }};o Bj.myfunc ();    // Ten

Since the outer scope can be accessed within the inner scope, there is an interesting phenomenon called "closures". It only takes two steps to make a closure:

1. Variables that reference the outer function in the inner layer function

2. Return the inner layer function as the return value of the outer function

 function   outer () { var  test = 10;  var  inner = function   () {console.log (test  ++);    };  return   inner;}  var  MyFunc = outer (); //  MyFunc (); //  myFunc (); //  one  myFunc (); //   

The returned inner function is a closed packet. Although the outer function is finished, its internal variable, test, is referenced by the closure, so it is not destroyed, it is saved, and can continue with the closure. Of course, the test variable can never be accessed by the outside world, and it becomes the "private variable" of the function that inner (and myfunc) points to.

Scopes and closures in JavaScript