flandlescarlet's diary【情報工学生の備忘録】

元機械工学科所属だった情報工学生です。JavaScriptで適当に何かを作ったり、絵を描いていたりします。

JavaScriptの関数のタイプを自分なりに調べてみた

関数には基本的に名前のある関数と名前の無い無名関数(匿名関数)の二つだけだと思っていたが、この前、即時間数という新しい関数をみかけたので一通り調べてみることにした。

普通の名前ありの関数

//引数無し、戻り値無し

 function fuc(){

}

//引数無し、戻り値有り

function fuc(){

return;

}

//引数有り、戻り値無し

function fuc(name){

}

//引数有り、戻り値有り

function fuc(name){

return;

名前のある関数は関数名を消費するうえ、他の製作スクリプトと混合させると、関数名の衝突が起こる可能性があるため、あまり好まれません。
使う場合同じ処理を行いたい時のみに扱います。基本的に一回きりの処理に使う場合は無名関数を使うほうが個人的には良いと思う。


無名関数(匿名関数)

// DOMで関数を操作する

var domValue = document.getElementById("click");

domValue.addEventListener("click",function(){ //無名関数を使う

alert("表示されました");

},true);

/////////////////////////////////////////////////////////

<input type="button" id="click" value="無名関数で呼び出す"> 

無名関数は、関数名を消費しない所に利点があります。

JavaScriptで複雑なプログラムを組む場合は関数名を付けるよりも

直接HTMLタグにIDまたclass名を付けてDOMでアクセスした上でイベントを付け足して呼ぶのが基本的な方針になります。

addEventListenerの旧式の方法となりますが、代わりにonclickやonmouseoverなどのイベントを繋げても同じように効果が得られます。

即時関数

(function(){ //名前が無い形式


 })();

(function time(){ //名前がある形式


date = new Date();
seconds = date.getSeconds();

alert(seconds);


setTimeout(time,1000);

})(); 

関数全体を()で囲んだ上に終わりにもう一つ()で囲んだ形の独特な形式を持っています。

意味的には名前のとおり、そのまま実行するという意味です。

関数は基本的に呼び出さなければ実行されませんが、即時関数の場合は態々ユーザーの振る舞いに答える必要性がないときに使うのが便利かと思われます。

  • 時間の更新(setTimeout,setInterval)
  • 記事の自動保存

JavaScriptの関数は柔軟で奥が深いです。

greasemonkeyを製作していた時に何気なしに関数をカッコで囲んでいたのも即時関数だということがようやく分かりました。