Advanced JavaScript notes (3)

In this article, we will study and discuss the closure in JS. Closures are a feature of purely functional programming, because they can greatly simplify complex operations. In JS, the importance of closures is self-evident!

Simply put, closure (closure) is the scope that a function creates when it is created to allow the function to access and manipulate variables outside of its own function. In other words, closures allow functions to access all variables and functions, as long as they exist within the scope of the function declaration. Remember that the declared function can be called at any subsequent time, even after the scope of the declaration disappears. We start this study by following a short snippet:

var outervalue="outer"; function outerfunction () {    // calling the function external variable outervalue     alert (outervalue);} // Execute outerfunction function outerfunction ();

We declare a variable in the same scope Outervalue and function outerfunction (), you can see that the outerfunction () function can access and manipulate the Outervalue variable, so that the code we have written countless times, But didn't realize that it was creating a closure. This is not surprising, because the variable outervalue and the function outerfunction () are declared within the global scope, and the scope (which is actually a closure) never disappears (because the page has already been loaded), not surprisingly, the function outerfunction () You can access the external variable outervalue, because it is still within scope and is available. It's just that in this case, even if the closure exists, it's not clear what the benefits are.

Next, we'll evolve the code again:

varOutervalue="outer";varlater;function outerfunction () {varInnervalue="Inner"; function Innerfunction () {//calling the Innervalue variable of an external functionalert (innervalue); //calling the Aftervalue variable of an external functionalert (aftervalue); }    varAftervalue=" After"; //reference the Innerfunction function to the laterLater=innerfunction;}//Execute the outerfunction functionouterfunction ();//Execute the innerfunction functionlater ();//Inner// After

After the Outerfunction () function executes, the scope of the Outerfunction () function has disappeared. According to the scope of the function, usually, the Innervalue and Aftervalue variables are no longer present at this time. But does the code above really do this? Of course not! After the Outerfunction () function executes, we assign a reference to the innerfunction of the intrinsic function to the global variable later to make the call. At this point, the Innerfunction function referenced by the later variable is available for calls to Innervalue and Aftervalue variables. Why? Because the closures!

When declaring an intrinsic function innerfunction in an external function outerfunction, it is not only declaring the Innerfunction function, but also creating a closure that contains not only the function declaration, It also contains all the variables in the outer function scope at the point at which the intrinsic function innerfunction declared. Finally, when the Innierfunction function executes, the scope of the external function outerfunction has disappeared, and through the closure, the Innerfunction function can be accessed to the original scope.

As you can see from the above code:

1, the parameters of the internal function are included in the closure;

2. All variables outside the scope of the inner function, even those declared after the function declaration, are included in the closure.

The 2nd explains why the intrinsic function innerfunction still has access to innervalue and Aftervalue variables when the scope of the outer function outerfunction disappears.

Advanced JavaScript notes (3)