The concept of closure in js

Closures are not unique to JavaScript, most high-level languages have this capability.

What is closure?

A closureis the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment).

This Segment is the definition of closure on MDN, which is understood as: a function and its surrounding references in the closed lexical environment constitute a closure. Maybe this sentence is still difficult to understand. Take a look at the example:

function createAction() { var message = "封闭环境内的变量"; return function() { console.log(message); } } const showMessage = createAction(); showMessage(); // output: 封闭环境内的变量

This example is a typical closure. There are several points to note:

1. showMessageis afunctionreturned fromcreateActionafter execution.
2. createActionis a closed lexical environment internally.messageis a variable within the encapsulated environment and cannot be directly accessed from the outside.
3. showMessageis executed outsidecreateAction, but during execution it accesses its internally defined local variablemessage(successful output). This is because the function referenced byshowMessage(the anonymous function insidecreateAction) is bound to the lexical environment (insidecreateAction) when it is defined. References (message, etc.).
4. The anonymous function bound to the internal syntax environment isreturnbrought tocreateActionfor use outside the closed environment, which forms a closure. If it is called insidecreateAction, it is not considered a closure.

Okay, I believe 1, 2, and 4 are all easy to understand, but it may be a little difficult to understand the most important point 3 - the difficulty is that this is not something that programmers can decide. It is determined by language characteristics. Sodon't think that "you" created the closure, because closure is a language feature, you just took advantage of this feature.

If the language does not support closures, similar to the above code, when executingshowMessage, themessagevariable will not be found. I particularly want to find an example, but unfortunately, all high-level languages I know seem to support closures as long as functions can be defined within functions/methods.

"Bring" locally defined functions out

We mentioned earlier that we can bring out locally defined functions throughreturn. Is there anything else besides this? Method?

The function has become a "good" here, no different from other goods (variables). As long as there is a way to take variables out, there is a way to take functions out. For example, using a "container" object:

function encase(aCase) { const dog = "狗狗"; const cat = "猫猫"; aCase.show = function () { console.log(dog, cat); }; } const myCase = {}; encase(myCase); myCase.show(); // output: 猫猫 狗狗

Are you inspired? Do you think of anything?

Modules and closures

Yes, exports and module.exports. In the module defined by CJS (CommonJS), you can bring goods one by one throughexports.something, or you can package goods throughmodule.exports = ..., but no matter what ,exportsis the one that brings the goods, but it may be theexportsoriginally arranged, or it may be replaced by one of your ownexports.

ESM (ECMAScript Module) uses theimportandexportsyntax, which is just another way to bring goods out, andreturnBringing goods is similar, the only difference is thatreturncan only bring one (unless packed),exportcan bring a bunch.

It should be added that whether it is CJS or ESM, the module is an encapsulated environment, and the things defined in it cannot be accessed outside as long as they are not taken out. This is different from the default global environment of web scripts, so pay attention to the difference.

If expressed in code, I probably thought it was like this when defining the module:

const var1 = "我是一个顶层变量吧"; function maybeATopFunction() { }

The result is that in the running environment, it actually looks like this (note: only for illustration):

// module factory function createModule_18abk2(exports, module) { const var1 = "我是一个顶层变量吧"; function maybeATopFunction() { } } // ... 遥远的生产线上，有这样的示意代码 const module = { exports: {} }; const m18abk2 = createModule_18abk2(module) ?? module; // 想明白 createModule_18abk2 为什么会有一个随机后缀没？

Is it still the same function?

I went too far, but I brought it back. Think about a question: Theoretically, a function is a static code block. Is the closure function returned by calling the outer function multiple times the same one?

Try:

function create() { function closure() { } return closure; } const a = create(); const b = create(); console.log(a === b); // false

If you feel surprised, then defineclosure()in another way to see if it will be easier to understand:

function create() { closure = function() { } return closure; }

If you still can’t understand it, look at this again:

function create() { const a = function () { }; const b = function () { }; console.log(a === b); // false }

Do you understand it? A new function is defined every timefunction. The function is new, and the name is not important - you can call it Xiao Ming, but others can also call it Xiao Ming.

So, to summarize:

A closure is composed of a function and various resources (references) in the closed environment where it is defined. Each closure obtained They are all unique because the environmental resources that constitute the closure are different (different local environments, different local variables defined, different parameters passed in, etc.).

Closure, I figured it out this time!

Recommended tutorial: "JS Tutorial"

The above is the detailed content of The concept of closure in js. For more information, please follow other related articles on the PHP Chinese website!