JavaScript 一番簡単なクロージャー説明

Aug 22nd, 2014

JSの曖昧なクロージャーとは

Webデザイナー、コーダーの方などは「C言語」のような老舗プログラム言語をやらずに
JSが初めてのプログラム言語 という方は、自分も含めて少なくないと思う。
少し慣れてきたと思ったら、恐らく上司などに言われるであろう
「グローバル汚染がひどい」
それを回避する方法にクロージャーや、カプセル化があるけれど、なくても動いてしまうから、結構あいまいにしがち。
でも知らずにいると、痛い目に合いそうなこと必須なので、ちょっと調べてみる。

クロージャーとは

「引数以外の値を関数に対して設定するプログラミング手法。」
== 変数の利用する範囲をコントロールする
何となく現場だと、クロージャーという言葉が出る時は変数スコープに問題がある時が多くて、その対処法と（スコープ管理）いうイメージが強い。
でも本当は上記の意味らしい。たまたまその手法を使うと、スコープの管理が上手くできるというだけ。
細かい事はお偉いさんのサイトでご確認を

スコープとは変数が使える範囲のこと。

クロージャー解説

JavaScript の関数は全てクロージャー
ちゃっちゃとどうすればグローバル汚染を防げるのか説明

(function(window, document, $) {
    var GLOBALPOLLUTION = 'グローバル汚染の原因。ここの範囲に変数書いちゃいかん';
    var FuncSamp = (function() {
        var IkkaiYobareru = 0; //初期化のように一回だけ呼びたいものを記述
        
        return function(target,e) {
            var NandomoYobarel = 0; //イベント毎に初期化したいものを記述
            e.preventDefault; //aタグとかイベントが呼ばれるものを指定する場合必要
            IkkaiYobareru ++;
            NandomoYobarel ++;
            console.log(IkkaiYobareru); // 1
            console.log(NandomoYobarel); // 1,2,3
            console.log(target); //Dom取得、今回は jQueryオブジェクト (this)
            console.log(GLOBALPOLLUTION);//グローバル汚染
        };
    })();
    
    $('#wrap').on('click','.buton', function(event) {
        FuncSamp($(this), event);
    });
    
})(window, document, jQuery);

はじめのうちは、大抵イベント呼び出し時に定数にしたいものを初期化してしまって外に出してたら気づかずグローバル汚染してた。ということが多い。…と思う。

GLOBALPOLLUTION の位置に変数を書いちゃいかん。でも書き換えない定数なら可。（でもやらないのがおすすめ）
var FunkSamp = (function() { … のようにリテラル無名関数を宣言すると、中の変数はローカル変数として扱われて、外に出されず汚染されない。定数扱いしたいものは、ここに記述。…即時関数を用いて FuncSmap に return されているオブジェクトが代入される。らしい
retun function() { …関数オブジェクトを、無名関数の戻り値とすることで、無名関数が実行された後、実体をもつ関数になる。…つまりイベント毎(クリックとか)に実行したい処理内容をここに書けと
クロージャーを使うと、引数にとらわれずに色々できる。
でも汎用性を上げるために引数を渡したいとおもうはず。そんな時はこんな書き方をしよう。

なんとなく、クロージャーというより、スコープの話し。
でもいいよね。つられてもいいよね。

JSの曖昧なクロージャーとは

クロージャーとは

クロージャー 解説

参考サイト

クロージャー解説