JS Closed Package

Beginners, this blog is only for their own study and summary, the reference note that there may be errors oh.

Why use closures

(i) Accessing local variables

Reference http://www.jb51.net/article/24101.htm

An intrinsic function can access the parameters and variables of the parent function in which it is nested, in addition to its own parameter variables.

However, an external function cannot access the variables of the intrinsic function.

　　Function F1 () {
var n=999;
}

alert (n); //Error

　　We sometimes need to get local variables inside the function. Therefore, within the function, a function is defined.

Look at the following example

　　Function F1 () {

n=999; F1 cannot access local variables of F2

function F2 () {
alert (n); //f2 can also access the variable of F1 999
}

}

Since F2 can read the local variables in the F1, we can read its internal variables outside the F1 as long as the F2 is the return value.

　　Function F1 () {

n=999;

return function () {
alert (n);
}

　　　　

}

var result=f1 ();

Result (); //999

(ii) Safety

Suppose we have an object for student, which has an attribute of name, and to access STU1, the simplest practice may be

var Student = function (name) {
THIS.name = name;
}//Construct a student constructor
var stu1 = new Student ("Xiaoming");
Call the constructor to create an instance of STU1;
alert (stu1.name); Accessing the properties of STU1
}

However, external access to the internal properties of the STU1 is not safe.

The way we might think of Java is to add a Get Set method

var Student = function (name) {
THIS.name = name;
This.getname = function () {
return this.name;
}
}//Construct a student constructor
var stu1 = new Student ("Xiaoming");
Call the constructor to create an instance of STU1;
alert (stu1.name); Access STU1 Properties Pop-up xiaoming
Alert (Stu1.getname ()); Method of accessing STU1 popup xiaoming

Very sorry, still not OK, because JS can't set private name;public like Java getName

(Of course, remove this.name = name, just keep the GetName method as if it could be achieved in this example, but it is not a long-term strategy)

But this idea is possible, and here's how to simulate private variables and public methods.

We might think of the return of a function (method) like the one above, so that the function can access the internal function of the return (that is, the method) without accessing the properties of the function itself.

      var Student = function (name) {
       var name = name;
      //Return to a method
       return{           
           getname:function () {
                return name;
              }
          }; } ;
    
    //Constructs a Student constructor
      var stu1 = new Student (" Xiaoming ");
      //Call constructor to create an instance stu1;
    alert (stu1.name);     Access STU1 Properties   Errors
    alert (Stu1.getname ());  //Eject xiaoming

var stu2 = Student ("Xiaohong");
Call the constructor to create an instance of STU1;
alert (stu2.name); Error
Alert (Stu2.getname ()); Pop Up Little Red
}

In this example, we call student, which returns a new object containing the GetName method, which is saved in stu1 Stu2, even though student has returned, but GetName can still access the Student Object Name property

The life cycle of an intrinsic function is longer than that of an external function.

In addition, there is another example from which we will not repeat.

http://www.zhihu.com/question/19554716

It is also important to say that the method returned above (GetName) accesses not a copy of the property (name) but its (name) itself.

Give another example.

There is a list

<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

To implement click 0 Popup 0 Click 1 popup 1 .....

It's easy to write like this

var Ali = document.getelementsbytagname ("Li");
var i;
for (i=0;i<5;i++) {
Ali[i].onclick = function () {
alert (i);
}
}
But in fact, no matter which one you click, it will pop up 4

This is because the onclick function accesses the I itself, not the copy of the function in the construct, so it pops up every time I;

Can be modified like this

var Ali = document.getelementsbytagname ("Li");
var i;
var help = function (i) {
return function () {
alert (i);
}
}
for (i=0;i<5;i++) {
Ali[i].onclick = Help (i);
}
}
Outside the loop, create an auxiliary function that returns a value that is bound to I.

The above is the method that Daniel gives, but the individual prefers the following one

var Ali = document.getelementsbytagname ("Li");
var i;
for (i=0;i<5;i++) {
Ali[i].index = i;
Ali[i].onclick = function () {
alert (This.index);
}
}
}

Adding an Index property to the list also allows you to achieve the goal.

Finally we can use the closure simulation module.

"Module, a function that defines private variables and functions, uses closures to create privileged functions that can access private variables and functions, and finally returns this privileged function"

This allows you to discard global variables

--------------------------------------------------------------------------------------------------------

Other

A variable scope ()

(i) "an intrinsic function can access its own parameter variables, but also access the parameters and variables that nest the parent function.

(b) "JS differs from other programming languages when it is a function scope, and the parameters and variables inside the function are not visible outside the function, but variables defined at any time within the function can be accessed anywhere." “

Cases

Window.onload = function () {
for (var i = 0; i<5; i++) {
Alert ("Loop inside" +i);
}
alert (i); The undefined Loop end auto-elimination variable I block scope is displayed in C
}

However, in JS, there is no block scope, the variable is based on the survival of the function and survival, so it will pop up 0 1 2 3 4 5;

　　So it's best to declare all the variables needed at the top of the function

(c) "intrinsic function has a longer life cycle than his external function"

Reference Douglas Crockford [1]:

It

is possible to implement public, private, privileged variables in JavaScript in this way because of closures , which means that in JavaScript, intrinsic functions always have access to the arguments and variables declared in the external function in which they reside. Even after its external function is returned (end of life) .

One point to note is that the intrinsic function accesses the created internal variable itself, not its copy. Therefore, you should pay extra attention when adding loops within the closure function. Also, of course, the closure feature can be used to create private functions or methods.

--------
There is a keyword "return" for the application of closures in JavaScript, referring to a passage in the JavaScript Secret Garden:

closures are a very important feature of JavaScript, which means that the current scope always has access to variables in the outer scope. Because a function is the only structure in JavaScript that has its own scope, the creation of closures relies on functions.