0

クロージャーとか無名関数とか

最近javascriptを触る機会が多くなり、いい機会なのでいつも適当だった無名関数とかクロージャーとかについて纏めてみた。
コードだらけ。

まさに”無名”関数といった書式。()で括るのが少し気持ち悪いけど()がない限り実行されない。
// hoge1と出力
(function(){console.log('hoge1');})();

var fc = function(){console.log(‘hoge2’);}で一旦途切れると考えれば納得の出力。
// hoge2と出力
var fc = function(){console.log('hoge2');}();

function fc()とほぼ同じ。
// hoge3と出力
var fc = function(){console.log('hoge3');}
fc();

クロージャー。
// hoge4と出力
function test4(){
return function(){
console.log('hoge4');
};
}
var fc = test4();
fc();

()で括るのを知らなかった時、出力されるものかと重いえらいハマった。
// 出力なし
function test5(){
return function(){
console.log('hoge5');
};
}
test5();

//関数の中の関数なんでこんな呼び方も一応OK
// hoge6と出力
function test6(){
return function(){
console.log('hoge6');
};
}
test6()();

test5で出力できないけど、こっちは()で括ってるので内側の関数が実行され出力される。
// hoge7と出力
function test7(){
return (function(){
console.log('hoge7');
})();
}
test7();

test5と同じく出力しない。
// 出力なし
var test8 = function(){
return function(){
console.log('hoge8');
};
}
test8();

引数のテスト。無理やり内側の関数に渡すことは可能。
// fuga9 hoge9と出力
function test9(i){
return sub(i);
function sub (i){
console.log(i);
console.log('hoge9');
}
}
test9('fuga9');

一見混乱しそうだけど、fcは内側の関数を呼びだそうとしてるので問題なし。
// fuga9 hoge10と出力
function test10(){
return function (i){
console.log(i);
console.log('hoge10');
};
}
var fc = test10();
fc('fuga10');

クロージャーの良さはグローバル変数を多用してると気づかない。
漠然とグローバル変数は遅いという認識だったけど、実際ベンチマークをとってる記事とかをみると確かに遅い。
本題と関係ないけど、重いとか遅いとかってのは主観とかスペックとかにもよるし、そもそも多少の遅さより開発の速度を優先せんとダメな場合もあるのでどれくらい重いとか遅いというのを数値化するのは重要。

大阪のWEB屋です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です