You don't know. javascript----Reading notes 2

Source: Internet
Author: User
Tags closure

    • What is a closure?

A: When a function can remember and access its lexical scope, a closure is generated, even if the function is executed outside the current lexical scope. In layman's terms: functions can be nested within other functions, so that they can access any variable in the scope they are defined in, which is the closure of JavaScript.

    • What are the applications of closures?

Answer: function as return value:

function foo () {var a = 2; function    Bar () {   //bar has a closure that covers the Foo scope and maintains a reference to it Console.log (a);    }return  bar;} var baz =//  2

The function is passed as a parameter:

function foo () {
var a = 2;
function Baz () { //baz has a closure that covers the Foo scope and keeps a reference to it
Console.log (a); 2
}
Bar (Baz);
}
Function Bar (FN) {
FN ();
}
Foo ();

Essentially, whenever and wherever the function (accessing their respective lexical scopes) is treated as a first-level value type and passed around, you will see the closure applied to these functions. In timers, event listeners, Ajax requests, cross-window communications, Web Workers, or any other asynchronous (or synchronous) task, the use of a callback function is essentially a closure!

    • What are the effects of closures?

A: Closures can access variables inside the function, which can be kept in memory, that is, the closure can make it the birth environment, can encapsulate the object's private methods and private properties, to achieve modularity.

  loops and closures :

 for (var i=1; i<=5; i++function  timer () {console.log (i);}, I*1000 );}

Results: output 5 x 6;

In the above code, we are expected to output the number of the two, one per second, one at a time, but essentially output 5 6; Why is that?

6 is the final value of I at the end of the loop, this is not difficult to understand, but why is it 5 6? According to how the scope works, first declare an I variable, then iterate, each iteration of I LHS operation, and then define a delay 1S output function, I do RHS operation, it seems that there is no problem, in essence? The functions of each iteration share a reference to the same I, is the loop fast or the delay output fast during execution? The result is not difficult to infer, the cycle is fast. As a result, you privately assume that the execution process can be equivalent to the following code:

varI= 6; SetTimeout (functiontimer () {console.log (i); //6}, i*1000); SetTimeout (functiontimer () {console.log (i); //6}, i*1000); SetTimeout (functiontimer () {console.log (i); //6}, i*1000); SetTimeout (functiontimer () {console.log (i); //6}, i*1000); SetTimeout (functiontimer () {console.log (i); //6}, i*1000);

So the problem is simple, we need a closure scope for each iteration during the loop.

Before we do that, we need to understand some of the concepts:

function declaration: Functions aaa () {}

While function declarations can be created for function scopes, it also poses the problem of polluting the global variables (where the AAA is bound in the scope) and the calling function that must be shown to execute the code. So how can we solve both of these problems at the same time?

Call function expression immediately: (function aaa () {}) (); or (function aaa () {} ());

Since the function is contained within a pair () of parentheses, it becomes an expression that can be executed immediately by adding another () at the end of the function.

The simplest way to differentiate a function declaration from an expression is to see where the function keyword appears in the declaration (not just one line of code, but the position in the entire declaration). If the function is the first word in the declaration, then it is a functional declaration, otherwise it is a function expression.

OK, to the point, it says that we need a closure scope for each iteration during the loop. Calling a function expression immediately creates a scope by declaring and immediately executing a function. So we can rewrite the above loop into this:

 for (var i=1; i<=5; i++) {(functionfunction  timer () {Console.log (i  ); }, I*1000 );}) ();}

Is that OK? No, although we have created a new scope for each iteration, the scope is empty and there are no variables to store the value of I in the iteration. So we also need to declare a variable:

 for (var i=1; i<=5; i++) {(function() {var j =function timer () {console.log (j);}, J*1000 );}) ();}
Or

(function (j) {

Console.log (j); }, j*1000);

}

Is there any other way? Yes, it's in the block scope. ES6: Let;let can bind a declared variable to any scope in which it resides, or convert a block to a scope that can be closed. such as this:

 for (var i=1; i<=5; i++//  Yes, block scope of closures!)  function  timer () {console.log (j);}, J*1000 );} or  for (let I=1; i<=5; i++function  timer () {console.log (i);}, I*1000< c12>);} Remember that the let declaration in the For Loop declares the variable in each iteration, and each iteration uses the end value of the last iteration to initialize the variable. 
    • Module:

The general form of a module: Create a private property of an object and a private method, and then create a privileged method that accesses the private properties and methods of the object through the closure, and finally return the function or save it to a place where it can be accessed.

The module mode has two prerequisites:

1. There must be an external enclosing function that must be called at least once (each call creates a new instance of the module).

2. The enclosing function must return at least one intrinsic function in order for the intrinsic function to form a closure in the private scope and to access or modify the private state.

  

 var  foo = (function   Coolmodule () { var  something =" Cool ";   var  another = [1, 2, 3 function   dosomething () {Console.log (  something);  function   Doanother () {Console.log ( Another.join ( "!)  " return   {dosomething:dosomething, doanot Her:doanother};}) (); foo.dosomething ();  //  cool  Foo.doanother (); //  1! 2! 3  

You don't know. javascript----Reading notes 2

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.