jsにおけるクロージャの概念

クロージャは JavaScript に固有のものではなく、ほとんどの高級言語にこの機能があります。

クロージャとは何ですか?

A クロージャは、バンドルされた(囲まれた)関数とその周囲の状態(字句環境)への参照の組み合わせです。

Thisセグメントは MDN におけるクロージャの定義であり、閉じられた語彙環境内の関数とその周囲の参照がクロージャを構成するものとして理解されます。この文はまだ理解しにくいかもしれません。例を見てください:

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

const showMessage = createAction();
showMessage();    // output: 封闭环境内的变量

この例は典型的なクロージャです。注意すべき点がいくつかあります:

1. showMessage は、実行後に createAction から返される function です。
2. createAction は内部的に閉じられた字句環境であり、message はカプセル化された環境内の変数であり、外部から直接アクセスすることはできません。
3. showMessage は createAction の外部で実行されますが、実行中に内部定義されたローカル変数 message (成功した出力) にアクセスします。これは、showMessage によって参照される関数 (createAction 内の匿名関数) が、定義時に字句環境 (createAction 内) にバインドされるためです。 メッセージなど)。
4. 内部構文環境にバインドされた匿名関数は return で createAction に持ち込まれ、閉じられた環境の外で使用され、クロージャを形成します。 createAction 内で呼び出された場合、クロージャとみなされません。

わかりました、1、2、4 はすべて理解するのが簡単だと思いますが、最も重要なポイント 3 を理解するのは少し難しいかもしれません。難しいのは、これはプログラマが理解できることではないということです。それは言語の特性によって決まります。したがって、 「あなた」がクロージャを作成したとは考えないでください。クロージャは言語機能であり、この機能を利用しただけであるためです。

言語がクロージャをサポートしていない場合、上記のコードと同様に、

showMessage を実行するときに、message 変数が見つかりません。特に例を見つけたいのですが、残念ながら、関数/メソッド内で関数を定義できる限り、私が知っているすべての高級言語はクロージャをサポートしているようです。

ローカルに定義された関数を「取り出す」

先ほど、

return を通じてローカルに定義された関数を取り出すことができると述べましたが、これ以外に何か方法はありますか?

ここでは関数が「財」となり、他の財（変数）と何ら変わりません。変数を取り出す方法がある限り、関数を取り出す方法もあります。たとえば、「コンテナ」オブジェクトを使用する場合:

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

const myCase = {};
encase(myCase);
myCase.show();      // output: 猫猫 狗狗

何かインスピレーションを受けましたか?何か思いつきますか?

モジュールとクロージャ

はい、exports と module.exports です。 CJS (CommonJS) で定義されたモジュールでは、

exports.something を通じて商品を 1 つずつ持ってくることも、module.exports = ... を通じて商品をパッケージ化することもできますが、何はともあれ、exports が商品を運んでくるのですが、それは元々手配された exports である可能性もあれば、独自の exports の 1 つに置き換えられる可能性もあります。 。

ESM (ECMAScript モジュール) は、

import および export 構文を使用します。これは商品を持ち出す別の方法であり、return 商品の持ち出しは似ていますが、唯一の違いは、return は 1 つだけ (パックされていない限り) を取得できるのに対し、export は複数のグループを取得できることです。

CJSにせよESMにせよ、モジュールはカプセル化された環境であり、その中で定義されているものは持ち出さない限り外部にアクセスすることはできないことを付け加えておきます。これは、Web スクリプトのデフォルトのグローバル環境とは異なるため、違いに注意してください。

コードで表現すると、モジュールを定義するときにおそらく次のようになると思います:

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

結果は、実行環境では実際には次のようになります (注: 説明のみ) ):

// module factory
function createModule_18abk2(exports, module) {
    const var1 = "我是一个顶层变量吧";
    function maybeATopFunction() { }
}

// ... 遥远的生产线上，有这样的示意代码
const module = { exports: {} };
const m18abk2 = createModule_18abk2(module) ?? module;

// 想明白 createModule_18abk2 为什么会有一个随机后缀没？

まだ同じ機能ですか?

行きすぎましたが、元に戻しました。質問について考えてみましょう: 理論的には、関数は静的コード ブロックです。外側の関数を同じものを複数回呼び出すと、クロージャ関数が返されますか?

試してみてください:

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

const a = create();
const b = create();

console.log(a === b);   // false

驚いた場合は、別の方法で

closure() を定義して、理解しやすいかどうかを確認してください:

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

まだ理解できない場合は、これをもう一度見てください:

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

理解できましたか?

function のたびに新しい関数が定義されます。この機能は新しいものであり、名前は重要ではありません。あなたはこれを Xiao Ming と呼ぶことができますが、他の人は Xiao Ming と呼ぶこともできます。

つまり、要約すると:

---

クロージャは、それが定義されている閉じられた環境内の関数とさまざまなリソース (参照) で構成されます。クロージャを構成する環境リソースは異なります (異なるローカル環境、定義された異なるローカル変数、渡された異なるパラメータなど)。

おわりに、今回は分かりました！

---

推奨チュートリアル: 「

JS チュートリアル 」

以上がjsにおけるクロージャの概念の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。