Study notes on closures

Write in front

  I finally got to school and started to rebuild the basics of js. The first stop is the dream-like closure ~ Yu Yu's big article helped me a lot, and I finished reading a set of initiation. It also understands why it is not recommended to consider closures first in actual application scenarios.
  In fact, it is just a computer science phenomenon, it is not mysterious. The following is the full text of js:

This combination of a function object and a scope (a set of variable bindings) in which the function’s variables are resolved is called a closure in the computer science literature.

  See the last prepositional phrase! the computer science literature!
  Note : This article is only a visualized personal understanding and summary of closures. For specific logic and theoretical knowledge, comrades still need to find the blog and tome of the great god.

Concepts to understand in advance

  Before talking about closures, we need to briefly understand the concepts of execution context and scope chain. Put a mind map first~

  tips: I personally understand that the relationship between this keyword and closure is not very close, so I won’t expand it here (actually because there are too many this sections, and one picture can’t be cut).
  If you have a basic understanding of the stack, then understand the execution context. The operating mechanism is very easy. The execution context, as the name implies, is that when the js code executes a piece of executable code, the corresponding execution context is created. It has three important attributes, namely variable object, scope chain and this. The contradiction analysis method tells us to grasp the main contradiction, then the main contradiction of the closure is the scope chain.
  When looking for a variable, first look up the variable object from the current context. If it is not found, it will look up the variable object of its parent execution context, and it will look up to the global position. Then this path is the scope chain, which can be understood as "fetters", because the existence of this scope chain makes closure possible.

### A classic question, an 82-year old question

var scope = "global scope";
function checkscope(){
    
    
    var scope = "local scope";
    function f(){
    
    
        return scope;
    }
    return f;
}

var foo = checkscope();
foo();

  The answer is directly pushed - local scope. So the question is, why is it not a global variable global scope?

Closure caused by scope chain

  Here we need to mention the concept of closures routinely. First, a closure still exists even if the context in which it was created has been destroyed; the second refers to drinking free variables in the code. Among them, free variables refer to variables that are used in functions, but are neither function parameters nor local variables of the function.
  In fact, it is very easy to understand. Taking this question as an example, we found that when accessing f, the checkscopecontext has been popped out of the stack, which means that local scopeit should no longer exist, so why the final result is still it? Indeed, fthe scope chain there has been a function checkscopein the function local scope, fthe scope chain global order checkscope- - f. Therefore, even if it checkscopeis destroyed, the system will automatically retain it because of the "fetters" of this scope chain local scope. At this point, when we fcan't find a scopevariable in the function , we can find its parent context along the way, that is checkscope, we found it local scope, so we no longer need to look for its "grandfather" global global scope.
  However, in describing this process, we will find a problem. How does the system know which variable should be kept in memory? What if the number of such variables reaches a considerable level? Obviously not too optimistic. The system is not a human being and cannot intelligently destroy variables that do not need to be accessed at the child nodes. Therefore, use closures with caution, especially in application scenarios with large amounts of data~

Reference link

Wei Yu's blog:
JavaScript in-depth execution context,
JavaScript in-depth execution context stack,
JavaScript in-depth closure,
JavaScript in-depth scope chain,
JavaScript in-depth variable object
Technical book: The
essence of JavaScript language, the
definitive guide to JavaScript