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

preface

I remember from the first chapter of the Little Red Book that JavaScript is a scripting language designed for web interaction. Js in the front position is self-evident, and grasp the basis of Js is the most important. The following article will point points to learn Js bit by bit. Js knowledge graph

The concept of closures

You might be asked: What is a closure? What do you know about closures? This article takes a brief look at closures.

  • A closure is a function that has access to a variable in another function’s scope.

  • Closures occur when a function can remember and access its lexical scope, even if the function is executed outside the current lexical scope.

To explore the closure

For a DEMO

I’m going to have a global variable count, and then I’m going to have a function addCount that increases that variable count by one

The problem is that the count variable is a global variable and can be easily changed.We can use the Js inline function to modify addCount to make the variable count local.The local variable count will not be affected by external variables. But the new problem is that addCount returns 1 no matter how many times we call it, which doesn’t add up as much as we need.

Closures can be used to solve the current dilemma:

summary

Implementation of the last closure: the variable addCount specifies the return word value of the function’s self-call. A self-calling function is executed only once. Set the variable count to 0 and return the function expression. The addCount variable can be used as a function. The cool part is that it can access the count in the scope above the function. This is called a JavaScript closure. It makes it possible for functions to have private variables. Count is protected by the scope of anonymous functions and can only be changed by the addCount method.

Classic closure

External access to local variables:

Variable x is not collected by garbage collection:

code

Var count = 0; function addCount(){ count++ console.log(count); } addCount(); Function addCount(){let count = 0 count++ console.log(count)} Return function(){console.log(count+1) return count+=1}})() Return ()=>{console.log(name) return name}} // Closure destroy y preserve x function fn1(){let x=1 return ()=>{let y =1 console.log(x++) console.log(y++) } }Copy the code

If you’re wondering what a closure is: the sum of the “function” and the “variables accessible within the function” (also known as the environment) is a closure.

This article summary

Closures have three features:

  • Function nested function
  • Arguments and variables outside a function can be referenced inside the function
  • Parameters and variables are not collected by the garbage collection mechanism

Closures are a mechanism for protecting private variables from outside interference by forming private scopes during function execution. Intuitively speaking is to form an undestroyed stack environment.

Practice makes perfect! . The above is the closure of some basic instructions, you big guy, if you see the wrong place thank you for helping to point out, thank you!