The concept of closure in js

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

What is closure?

A closure is 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. showMessage is a function returned from createAction after execution.
2. createAction is a closed lexical environment internally. message is a variable within the encapsulated environment and cannot be directly accessed from the outside.
3. showMessage is executed outside createAction, but during execution it accesses its internally defined local variable message (successful output). This is because the function referenced by showMessage (the anonymous function inside createAction) is bound to the lexical environment (inside createAction) when it is defined. References (message, etc.).
4. The anonymous function bound to the internal syntax environment is return brought to createAction for use outside the closed environment, which forms a closure. If it is called inside createAction, 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. So don'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 executing showMessage, the message variable 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 through return. 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 through exports.something, or you can package goods through module.exports = ..., but no matter what , exports is the one that brings the goods, but it may be the exports originally arranged, or it may be replaced by one of your own exports.

ESM (ECMAScript Module) uses the import and export syntax, which is just another way to bring goods out, and return Bringing goods is similar, the only difference is that return can only bring one (unless packed), export can 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 define closure() 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 time function. 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!