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

JavaScriptのクロージャとは？仕組みとコード例をわかりやすく解説

JavaScriptのクロージャ（Closure）とは

クロージャとは、関数と、その関数が宣言された場所（スコープ）をひとまとめにしたものを指します。JavaScriptでは、すべての関数が本質的にクロージャとして動作するという特徴があります。

もう少し具体的に言うと、クロージャとは「関数が呼び出された際に、呼び出し元のスコープではなく、その関数が宣言されたときのスコープを使用して動作する」という性質を持つ関数のことです。この仕組みにより、関数は自分が生まれた環境の変数を覚えているかのように振る舞います。

クロージャの動作を確認できるサンプルコード

以下のサンプルでは、同じ名前の変数 num がグローバルスコープ・関数 a()・関数 b() の3か所でそれぞれ異なる値で宣言されています。どの値が表示されるのか、コードを実行して確認してみましょう。

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

実行結果と解説

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

一見すると、無名関数は b() の中で呼び出されているため num = 30 が表示されそうに思えますが、実際にはそうなりません。無名関数は a() の内部で宣言されているため、そのスコープチェーンには a() のローカル変数 num = 15 が含まれています。クロージャは「宣言された場所」のスコープを参照するため、呼び出し元である b() の num = 30 やグローバルの num = 10 は使われないのです。

このように、クロージャを理解することは、JavaScriptにおけるスコープやデータの隠蔽、コールバック処理などを正しく扱う上で非常に重要です。

  1. JavaScriptの部分関数（Partial Function）とは？仕組みと実装例をわかりやすく解説

    部分関数（Partial Function）とは、既存の関数を引数として受け取り、それに加えて別の型の引数も同時に受け取れるようにする仕組みです。まず渡された引数の一部を使い、残りの引数を受け取る新しい関数を返します。そして、返された関数が呼び出されるときに、あらかじめ固定しておいた引数とそのときに渡された引数をすべて組み合わせて、元の親関数が実行されます。 この手法は「部分適用（Partial Application）」とも呼ばれ、関数型プログラミングの基本的なテクニックのひとつです。共通する引数を先に束縛しておくことで、処理の再利用性やコードの可読性を高めることができます。 コード例 以下

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

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