The javascript closures in my eyes

Source: Internet
Author: User
Tags closure variable scope

The scope of a variable

To understand closures, you must first understand the special variable scope of JavaScript.

The scope of a variable is nothing more than two kinds: global variables and local variables.

The JavaScript language can access external variables inside the function, but it is not possible to use variables inside the function, that is, local variables, outside of the function.

External variables can be accessed inside the function.

such as this:

var num=20;  func1() {
Console.log (num);
}
//The value obtained is -

On the other hand, a local variable inside a function cannot be read naturally outside the function.

such as this:

function func1 () {    var num=20//  num is not defined (error)

Second, How to get the value of a local variable outside of a function ?

  Sometimes we want to get the variables inside the function, what should we do? We can then define a function within the function to achieve our goal.

function func1 () {    var num =;     function Func2 () {        return  num    }    return  func2;} var result = func1 ();     //The value obtained is  -

In the above code, the function Func2 is included inside the function func1, at which point Func2 can invoke all local variables in func1. However, in turn, FUNC1 cannot invoke local variables inside FUNC2. This is the scope chain that is unique to the JavaScript language. The child will search for all of the parent's variables at the first level and eventually find the global variable.

In this section of code, the function Func2 is the closure.

Three, the concept of closure

The official explanation is that closures are an expression (usually a function) that has many variables and environments that bind them, and so these variables are also part of the expression. It is believed that very few people can read this sentence directly because he describes it as too academic.

  we can simply understand that closures are functions that can read variables inside other functions, in essence, a closure is a bridge that connects the inside of the function to the outside of the function.

Iv. use of closures  

The maximum use of closures is two:

  ① can read variables inside the function

② variable persistence to keep the value of the variable always in memory

How to understand the persistence of variables? Take a look at the following code:

 function   fn1 () { var  num = 18;  function   fn2 () { return  ++num;  return   fn2;}   var  result = fn1 (); Console.log (Result ());   //  The resulting value is  console.log (result ()); //   console.log (Result ()); //  

In this code, result is actually the closure fn2 function. It runs altogether three times, the first value is 19, the second value is 20, and the third value is 21. This proves that the local variable num in the function fn1 is kept in memory and is not automatically cleared after the FN1 call.

Why is that? The reason is that FN1 is the parent function of FN2, and FN2 is assigned to a global variable, which causes FN2 to always be in memory, and FN2 's presence depends on fn1, so fn1 is always in memory and will not be reclaimed by the garbage collection mechanism (garbage collection) after the call ends.

Five, the advantages and disadvantages of closures

Advantages:

① logical succession, when a closure is a parameter called by another function, avoid writing extra logic separately from the current logic.

② facilitates the invocation of local variables of the context.

  Disadvantages:

Because the closure will make the variables in the function are stored in memory, memory consumption is very large, so can not abuse closures, otherwise it will cause the performance of the Web page, in IE may lead to memory leaks. The workaround is to remove all unused local variables before exiting the function.

  Closures and scopes have an inseparable relationship, really is "want to say love you not easy"!

  Complete the full text!

The javascript closures in my eyes

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.