This is the fifth day of my participation in the August More text Challenge. For details, see: August More Text Challenge

closure

  • Closures are an advanced use of our functions
  • Before we talk about closures we need to review functions

Two stages of a function

  • We’ve always said that a function has two stages

    1. Definition phase
    2. Call stage

Function definition stage

  1. Create a storage space
  2. Put the code in the body of the function exactly in this space (without parsing variables)
  3. Give the address of the storage space to the function name

Function call phase

  1. Find the storage space of the function by the address of the function name
  2. Parameter value
  3. Preliminary analysis
  4. Take the code out of the function storage space and execute it.

Redefine the function call phase

  1. Find the storage space of the function by the address of the function name

  2. Parameter value

  3. Preliminary analysis

  4. Create an execution space in memory

  5. Take the code out of the function storage space and execute it in the newly created execution space

  6. After the execution, the execution space in the memory is destroyed

    Function fn() {console.log(' I am fn function ')} fn()Copy the code
    • When the function executes, it creates onePerform spaceWe’ll call himxxff00)
    • Console. log(' I am the fn function ')This code is inxxff00This space
    • After the code is executed, thisxxff00The space is destroyed

Function execution space

  • Each function will have one storage space

  • But each call generates a completely different execution space

  • And the execution space is destroyed after the function is executed, but the storage space is not

  • So what’s the point of this function space being destroyed when it’s finished executing?

    • There are ways we can keep this space from being destroyed
    • The closure is to take advantage of this undestroyed execution space

Function execution space is not destroyed

  • The execution space of a function is destroyed after the function is completed

  • However, once a reference data type is returned inside the function and a variable is accepted outside the function

  • Then the function execution space will not be destroyed

    Function fn() {const obj = {name: 'Jack', age: 18, gender: 'male'} return obj} const o = fn()Copy the code

    • When a function executes, it generates a function execution space (let’s call it xxFF00).

    • The code executes in the XXFF00 space

    • Name an object space in the space xxFF00 (XXFF11)

    • The xxFF11 object address is returned in the execution space xxFF00

    • The zero outside of the function takes the address of an object, right

      • But it’s one inxxff00Function execution spacexxff11Address of the object
      • becauseoThe variable is always associated with the object address, soxxff00This space will never be destroyed

    • Wait until when to execute a code o = null

      • At this point,oVariables are more than correlated inxxff00Function execution spacexxff11Address of the object
      • So, this time the function executes spacexxff00Is destroyed

closure

  • Closures take advantage of this function to execute space without destroying logic
  • Several conditions make up a closure

Not destroyed space

  • The first condition of a closure is that it utilizes the logic of not destroying space

  • It just doesn’t return an object data type

  • Instead, return a function data type

    function fn() {
    
  return function () {}
}

const f = fn()
Copy the code
    • fThe variable accepts oneFn execution spaceThe function in

Internal functions refer to variables in external functions

  • There are two functions involved

  • The inner function looks at or uses the variables of the outer function

    Return function a() {console.log(num)}} const f = fn()Copy the code
    • fn()It will generate onexxff00Execution space of
    • againxxff00Inside this execution space, we define aaFunction of theThe storage space xxff11
    • The global f variable accepts phixxff00The inside of thexxff11
    • soxxff00It’s the space that won’t be destroyed
    • becausexxff00It will not be destroyed, so the num variable defined inside will not be destroyed either
    • In the futuref()You can access the num variable

Characteristics of closures

  • Why is it called a feature, because each of its points is a strength and a weakness

    1. Scope space is not destroyed

      • Advantages: Because not destroyed, the variable page will not be destroyed, increasing the life cycle of the variable
      • Disadvantages: because do not destroy, will always take up memory, more later will lead to memory overflow

    2. You can use closures to access variables inside a function that are outside of another function

      • Advantage: Internal data can be accessed outside the function
      • Disadvantages: The reference must always be held so that the function execution stack is not destroyed

    3. Protecting private variables

      • Advantage: you can put some variables inside a function without polluting the global
      • Disadvantages: Use closure functions to access, not very convenient

Closure concept

  • You have A function A, and inside A returns A function B
  • And then there’s A variable outside of A that references this function B
  • Function B accesses private variables inside function A
  • The above three conditions are indispensable