16
17

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

JS初心者がクロージャ(closure)を理解する

Posted at

目的

自分のようなJavaScript入門者への情報共有、また自分の備忘録のために作成します。

クロージャとは

「”ローカル変数を参照する関数”を戻り値とした関数」
クロージャを使うことで、通常は関数処理終了後に破棄されるローカル変数の値を保持しておくことが可能になります。
Java的に言うと、**「クラスからインスタンスを生成し、そのインスタンスフィールドにアクセスする」**ことであると私は思いました。

説明

以下の関数を定義しておく。これがコンストラクタとなる。

closure.js
function closure () {
  var hoge = {};

  return function (key) {
    hoge[key] = "fuga";
    console.log(hoge);
  }
}

そして、関数closureを別の変数に格納する。
これによりインスタンス化がなされた。

closure.js
var test = closure();

以上の準備をしたうえで、test("fuga")とtest("puyo")を実行していく。
すると…

closure.js
test("fuga");
> Object { fuga: "fuga" }

test("puyo");
> Object { fuga: "fuga", piyo: "fuga" }

別々に関数を実行しているにも関わらず、関数内のローカル変数hogeが保持されているのがわかる。
関数がまるでインスタンスのようにふるまっている。これがクロージャ。

以上です。

初見

  • Javaと比較すると(以前はJavaをやっていました)、JavaScriptの「関数」が万能すぎて、よく面食らっています。
  • クロージャも本を読んだときは???だったが、こうしてようやく記事にすることで理解できたと思います。JS習得を続けたいです。
16
17
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16
17

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?