This is the 4th day of my participation in the August More Text Challenge

directory

  1. So what is a closure?
  2. When talking about function creation and execution look at closures (quote: stack, EC, AO, VO, scope)
  3. Then I’ll talk about what closures do and how they are referenced in projects, and the problems they pose
  4. Finally, how to use the advanced programming skills triggered by closures in the framework source code, or write your own class library

preface

The closure question will be used to test candidates in both entry-level, intermediate, and advanced front-end interviews. The answer to this question varies widely among candidates of different abilities,

Common interview questions include the following scenarios.

Bronze interviewer

Closures are xx… . Its harm xx… .

Diamond interviewer

Closures are xx… . It features xx… And its harm xx… . How do we use xx on a daily basis? .

These two types of interviewees are very common, not bad, but not amazing. How to answer the closure question?Four said closures“, which four said, please read down.

1. What is a closure first?

  • It’s official: a closure is a function that has access to variables in the scope of another function.
  • MDN: Closure is a special kind of object. It consists of two parts: the function and the environment in which the function is created. The environment consists of any local variables that were in scope when the closure was created.
  • Self-understanding: The mechanism for executing functions, forming private contexts, and saving and protecting private variables, called closures, is a mechanism.

Self-understanding can be the finishing touch, showing that you not only learn, use, but also understand.

2. Look at closures when talking about function creation and execution (quote: stack, EC, AO, VO, scope)

Most interviewers don’t look at closures from the ground up, but if you can look at closures from function execution, you’re ahead of the pack. Up a notch in the interviewer’s esteem. How to say it? Keep going.

The browser will execute the code in the stack memory (ECStack) when loading the page, and the stack execution will generate a private context (EC), which can protect the use variable (AO) inside from external interference, and if something in the current execution context is occupied by something outside the context, The current context is not released from the stack, so variables and their values can be saved inside, so I consider closures to be a mechanism for storing and protecting internal private variables.

Function performs

  1. Each execution of a function creates a new private context, with no necessary connection to the context generated by the previous execution.
  2. Into the stack perform
  3. Create AO
  4. Initializing the scopechain [[scopechain]] : < EC < FN >, scope < ECXXX >>
  5. Initialize this
  6. To initialize the arguments
  7. Parameter value
  8. Variable ascension
  9. Code execution
  10. If a variable is not private, search it on the scope chain. If it is not superior, search it online until EC(G). The search of a variable is actually a process of stitching the scope chain.

Normally, after code execution is complete, there are three scenarios.

  • If something in the current context is occupied by something outside the context, the current context will not be released, forming a closure.
  • If it is not occupied, it will be released when the execution is done, and no closure will be formed.
  • In addition to the above two cases, there is another case where the context is not used, but is used immediately after it is used, so it cannot be released until it is used up, thus forming a temporary not-released closure.

3. Then discuss the functions of closures and reference scenarios in projects, as well as the problems they bring

Function execution creates a new private context, which may or may not be released. This context does what it does:

  • Protection: A separate area of code execution where private variables can be stored without any conflicts with other areas (to prevent global variable contamination)
  • Save: If the context is not destroyed, the value of the stored private variable is not destroyed and can be retrieved and used in its subordinate context

In a real project, you would wrap the contents of your modules around closures so that your writers can protect their code from collisions with global variables or other code by using protection mechanisms.

Before we used ES6’s LET, we looped through event bindings. When the event trigger needed the argument value, we implemented our requirements by saving the argument value of each round based on the closure. Except now there is block-level scope based on let to protect what needs to be saved (mechanism similar to closure).

However, it is not recommended to use closures too much, because using unfreed context takes up stack memory space, and excessive use will result in slow rendering of the page, so use closures properly.

4. Finally, how to use the advanced programming skills triggered by closures in the framework source code, or write their own class library

In addition to the traditional business development refers to the closure, you can tell me something about yourself before someone else’s source code and write their own plugins, tend to use some JS both of high-level programming skills is to absorb the development of the management and the function of the code, their mechanisms are using closures, for example: inert functions, currie, compose function.

conclusion

Answering closures from a theoretical, underlying operational, practical, and other perspectives will not only reveal the depth of your base capabilities, but also the breadth of your base capabilities. Well, that’s the end of this article, hopefully to help you understand closures better, and hopefully to help you with your interview.

If you think it’s good, give it a thumbs up.