,

[JavaScript General] Closure（クロージャ）

公開日: 2016/08/03
更新日: 2019/01/11

用語の整理。

Contents

MDN

クロージャ

  • クロージャは、独立した (自由な) 変数を参照する関数です。言い換えると クロージャ内で定義された関数は、自身が作成された環境を ‘覚えています’。
  • クロージャは関数とその関数が作られた環境という 2 つのものが一体となった特殊なオブジェクトです。 この環境は、クロージャが作られた時点でスコープ内部にあったあらゆる変数によって構成されています。

実用的なクロージャ

  • クロージャを使うと、データ (環境) をそれを操作する関数と結びつける事が出来ます。 メソッドを 1 つだけ持つオブジェクトを使いたくなるような状況ならば、どんな時でもクロージャを使う事ができます。

クロージャでプライベートメソッドを模倣する

  • プライベートメソッドはコードへのアクセスを制限するのに役立つだけではなく、 コードのパブリックインターフェースが不要なメソッドでいっぱいになるのを防ぐため、 グローバル名前空間を管理するのに非常に有効です。
  • モジュールパターン としても知られる、クロージャを使って、プライベートな関数と変数にアクセスできるパブリック関数を定義するにはこのようにします。

パフォーマンスへの配慮

  • 例えば、新しくオブジェクト/クラスを作成する時、 一般的にメソッドは オブジェクトのコンストラクタの中で定義するのではなく、 オブジェクトのプロトタイプに結びつけるべきです。

関連

書籍

JavaScript本格入門　～モダンスタイルによる基礎からAjax・ｊQueryまで
JavaScript本格入門　～モダンスタイルによる基礎からAjax・ｊQueryまで

posted with amazlet at 16.08.02
山田 祥寛
技術評論社
売り上げランキング: 16,839
Amazon.co.jpで詳細を見る
  • クロージャとは、「ローカル変数を参照している関数内関数」。
function closure(init) {
  var counter = init;
  return function() {
    return ++counter;
  }
}
var myClosure = closure(1);
document.writeln(myClosure());
document.writeln(myClosure());
document.writeln(myClosure());

サイト

var module = (() => {
  var count = 0;
  return {
    increment() {
      count++;
    },
    show() {
      console.log(count);
    }
  };
})();
module.show(); // 0
module.increment();
module.show(); // 1
console.log(count); // undefined

クロージャを作ってからクロージャを理解する。 理解するよりも、作る方が簡単。

function outer() {
  var x = 1; 　// outerのスコープ内で変数を定義
  return　function () { // この関数が「クロージャ」
    alert(x); // "関数内関数"の中で、outerスコープの変数を参照。
  };
}
var f = outer();
f(); // 1と表示。

これが何故クロージャなのかというと、次の条件を満たしているからです。

  • outerのスコープ内で変数を定義し、
  • outerの中に関数(=関数内関数)を作って
  • その関数内関数から、先ほどの変数を参照する