Closures are always a hot topic, and I wondered if I could write a closure that would be understandable to all of my friends who are just getting started. So the whole article will be more grandiose, as little as possible to quote lofty words. Please correct me if there is any wrong understanding

What is a closure?

When asked what a closure is during an interview, I think the standard answer is:

A function can remember and access its lexical scope, even if the function is executed outside the current lexical scope

Notice the words in red. This is the key to understanding what a true JS closure is.

example1: 
function foo() {
	var a = 2;
	function bar() {
		console.log( a ); / / 2
		}
    	bar(); 
}
foo();

Copy the code

Is this a closure??????? If you follow the common definition of closures (because closures aren’t just for JS; closures are a computer term), this is a closure, because bar() is contained by foo(), and bar() has access to values in foo() ‘s scope. However, from a JS perspective, this is not a JS closure, or a closure we often ask about in interviews. Back to what I consider the standard answer: even if the function is executed outside of the current scope, bar() clearly doesn’t do that in this code. So what is a true closure? According to the example given in the js book you didn’t know

example2: 
function foo() {
	var a = 2;
	function bar() { 
    	console.log( a ); 
    }
	return bar;	 
}
var baz = foo();
baz(); / / 2
Copy the code

Attention everyone!! The only difference between this example and the previous one is that there is a new return. Foo () returns its internal function bar(), so that baz can access the global variable a in foo() through this return. This satisfies our definition of a function that executes outside of its current scope, so in future interviews, whenever asked about any form of closure, please pay close attention:

A function can remember and access its lexical scope, even if the function is executed outside the current lexical scope

What’s wrong with closures? Why do so many people ask about closures?

If you answer what a closure is, the next thing you’re asked is what happened to closures? Why do we use closures? What problems exist?

Memory problems

Whether node or Web, we all know that JS runs in our JS interpreter, which can be understood as the Virtual machine in Java. In this interpreter, there is an important memory reclamation mechanism: reference counting and tag clearing.

Js will exist in the global search our memory data, has one of the data has been found that if the memory could not be access to (can not be access to: is to pass variables to obtain), is considered to be unable to reach the memory data, because you don’t have a variable to obtain (bs), so I will give you the recycling, so the key point: If we use closures and return assigns a value to a global variable, such as baz in example 2, then the function foo() referenced in baz is never recycled because js scans foo() and finds that it was referenced by baz. If we don’t manually break their link baz=null, then foo() will never be recycled. So we always have to keep closures in mind when we write code, and then when those closures are no longer used, we have to manually release them. In example 1, we don’t have to worry about memory leaks because the variables in foo() are automatically recycled after foo() is executed because there are no references to foo() from external variables.

Do I have to check all closures I use if there are memory leaks with closures?

Closures are no match for memory, or we can’t live without them, and as long as our code is well packaged, memory leaks can be minimized. Now, I’m going to talk a little bit about what I tend to look for when I write code

  1. When we accept the value of return, we need to consider whether the enclosing variable is in the global scope. If so, we need to consider when to release the variable. Because it will definitely not be recycled (because this is global, according to the mark cleared, our top level variable, if not manually released, will not be released)

  2. Name the top-level variables as little as possible (a little bit like # 1), which is our encapsulation. I’ve been hearing this since I started js, “global pollution, minimize global variables,” but why? (One of the drawbacks is tag clearing, which does not automatically reclaim data held by global (top-level) variables.)

Use closures to encapsulate modules

A module has two main characteristics: (1) it calls a wrapper function to create an internal scope; (2) The return value of the wrapper function must include at least one reference to the inner function, so that a closure covering the entire inner scope of the wrapper function is created.

Js syntax sugar class import export before ES6, all use the characteristics of closures to achieve class encapsulation, typical is get and set methods