847
794

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.

JavaScriptでクロージャ入門。関数はすべてクロージャ?

Last updated at Posted at 2013-07-22

JavaScriptでは関数はすべてクロージャです。
ではそもそもクロージャってなんなんでしょうか。

#クロージャ??

クロージャの簡単な定義として
「自分を囲むスコープにある変数を参照できる関数」
が挙げられます。

言葉ではパッとしないかもしれませんが、コードを一つづつ追っていくと、
入門としてのクロージャは簡単に理解できます。

#スコープ

まずJavaScriptは関数ごとにスコープが作られます。
スコープとは変数を参照できる範囲のことです。
その範囲外では変数は参照できません。

function func() {
  var value = 1;
  console.log(value);
}
func(); // 1
console.log(value); // undefined

#クロージャの例

ここでクロージャの例を見てみましょう

function func() {
  var value = 1;

  function innerFunc() {
    console.log(value);
  }
  innerFunc();
}
func(); // 1

先ほどの定義を思い出してみましょう。
「自分を囲むスコープにある変数を参照できる関数」

内側の関数が外側の関数の変数を参照できています。
ここで重要なのは、値のコピーではなく、参照ができていることです。

ですから、ここでは下記のようにvalueの変更が可能です。

function func() {
  var value = 1;

  function innerFunc() {
    value++;
  }
  innerFunc();
  console.log(value); // 2
}
func();

#クロージャの実践例
ここで基本的なクロージャの実践例として一つ、
「モジュールパターン」を紹介します。

クロージャの一つの利点として、
変数をプライベートな変数として扱う事ができるようになります。

var module = (function() {
  var count = 0;

  return {
    increment: function() {
      count++;
    },
    show: function() {
      console.log(count);
    }
  };

})();

module.show(); // 0

module.increment();
module.show(); // 1

console.log(count); // undefined

即時関数を用いてオブジェクトを生成しています。
moduleにはreturnされているオブジェクトが代入されます。

ここで重要な事として、
即時関数内のcountに関しては内側からしか参照できないという事です。
外側からアクセスしようとした場合にはもちろん「undefined」となります。

これによりプライペードな変数として扱う事が可能になります。

外部アカウント

技術情報のみつぶやくアカウント作成しました。JavaScriptは最新情報も追っていきます。
[Twitterはこちら]
(https://twitter.com/takeharumikami)
[Feedlyのフォローはこちら]
(http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fqiita.com%2Ftakeharu%2Ffeed)

おすすめの記事

JavaScriptはオブジェクト指向?プロトタイプベースのオブジェクト指向を学ぶなら。
JavaScriptのプロトタイプからオブジェクト指向を学ぶ

JavaScriptでは関数型言語の一部の機能?実践的なJavaScriptの関数型とは。
JavaScriptで関数型プログラミングの入門

関数型プログラミングを強力に後押しするライブラリ、Underscore.jsとlodashとは。
JavaScriptで関数型プログラミングを強力に後押しするUnderscore.jsのおすすめメソッド12選(lodashもあるよ)

847
794
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
847
794

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?