JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのクロージャはどのように機能するのか？仕組みをわかりやすく解説

JavaScriptにおけるクロージャ（closure）とは、関数と、その関数が宣言された場所（スコープ）をひとまとめにした仕組みのことです。実は、JavaScriptではすべての関数がクロージャとして動作します。

クロージャの重要なポイントは、関数が呼び出されたときに参照するスコープは「呼び出された場所のスコープ」ではなく「宣言された場所のスコープ」であるという点です。この性質により、関数は自分が定義された環境の変数にアクセスし続けることができます。

クロージャの動作例

以下のコードを実行すると、クロージャの仕組みを実際に確認できます。

<!DOCTYPE html>
<html>
    <body>
        <h2>Working with JavaScript Closures</h2>
        <script>
            var p = 10;
            function a() {
                var p = 15;
                b(function() {
                    alert(p);
                });
            }
            function b(f){
                var p = 30;
                f();
            }
            a();
        </script>
    </body>
</html>

実行結果と解説

このコードを実行すると、アラートには「15」が表示されます。

なぜそうなるのか、処理の流れを順番に見ていきましょう。

処理の流れ

1. グローバルスコープで変数 p に 10 が代入されます。

2. 関数 a() が呼び出され、その内部でローカル変数 p に 15 が代入されます。

3. 関数 a() の中で無名関数（alert(p) を実行する関数）が作成され、関数 b() に引数として渡されます。

4. 関数 b() の内部でローカル変数 p に 30 が代入され、渡された関数 f() が実行されます。

なぜ「15」が表示されるのか

ここがクロージャの本質です。無名関数は関数 b() の中で呼び出されていますが、参照するのは宣言された場所、つまり関数 a() のスコープです。そのため、関数 b() 内の p = 30 は無視され、関数 a() のローカル変数 p = 15 が参照されます。

このように、クロージャは「関数が定義されたときのスコープを記憶する」仕組みであり、JavaScriptにおけるスコープチェーンやデータの隠蔽、コールバック処理などを理解するうえで非常に重要な概念です。

  1. JavaScriptで関数を「関数」として呼び出す方法をわかりやすく解説

    JavaScriptでは、関数をさまざまな形で呼び出すことができます。代表的な呼び出し方には、通常の関数としての呼び出し、メソッドとしての呼び出し、コンストラクタとしての呼び出しなどがあります。 ここで解説する「関数として呼び出す」とは、独自に定義したJavaScript関数を、ごく普通の関数と同じように呼び出すことを指します。具体的には、関数名の後ろに括弧 () を付け、必要に応じて引数を渡すだけで実行できます。これは最も基本的でシンプルな関数の呼び出し方です。 基本的な書き方 // 関数の定義 function Display() { document.write(Hello Worl

  2. JavaScriptのクロージャとは？仕組みと実装例をわかりやすく解説

    クロージャとはJavaScriptにおけるクロージャ（Closure）とは、外側の関数の実行が完了して値を返した後であっても、内側の関数から外側の関数のスコープ（変数）にアクセスできる仕組みのことです。言い換えれば、内側の関数は、外側の関数の変数に対して常にアクセスできるということです。この性質を活用することで、データを外部から直接操作されないように隠蔽したり、関数の呼び出し間で状態を保持する処理を実現したりすることが可能になります。クロージャのサンプルコード以下は、JavaScriptでクロージャを使用した具体的なコード例です。ボタンをクリックすると、クロージャによって保持された値を使って2