サイテック株式会社 > 【連載】新人女子プログラマーの技術修行日記 - 第1回 Javascript編①　―無名関数と関数参照―

エンジニア募集中！

サイテック株式会社で、根っからの技術者である社長や、大手IT企業から転職してきた仲間たちと議論しながら、社会をもっと豊かに、幸せにするアプリケーションを作ってみませんか？

Webアプリケーションエンジニア
エンジニア実習生

詳細はこちら

この会社の特徴を知る

谷田部　輝真が語る未来を知る

サイテック株式会社の雰囲気を知る

「「ソーシャルアプリ勉強会（第3回）の代わりの飲み会」開催しました！」

など 17 記事

サイテック株式会社の技術・仕事を知る

「【連載】Twitterまとめ - 第2回サービス企画の苦しみ編（5月3週）」

など 66 記事

新人女子プログラマーの技術修行日記
第1回 Javascript編①　―無名関数と関数参照―

by ゆきんこ

Tags: RIA・リッチクライアント関数 JavaScript

どーも。新人です。

いろんなコードを見ていると、
関数定義の仕方っていろいろあるなぁと思いまして、、
それぞれどのように使われているのか気になったので調べてみました。

Javascriptにおける関数＝それ自体がオブジェクト＝ただの実行可能なデータらしい。
つまり関数も変数のように扱うことができて、
別の変数に代入したりできるということだそうです。

関数の基本的な関数の書き方は、

   ①
   function hoge(str){
       alert(str);
   }

とかですが、それを

   ②
   var hoge = function(str){
       alert(str);
   }

というようにも書けます。

②のような名前のない関数定義をを無名関数（または関数リテラル、匿名関数）と言います。
正確には無名関数を関数リテラル（文字列）に割り当てています。

この方法を使ってイベントとつなぐことができます。
   ③
   window.onload = function(){
       実行する処理;
   }

上記はつまりwindowオブジェクトのonloadプロパティに無名関数を代入している。
ブラウザがウィンドウを読み込んだときの１回だけ呼ばれる関数なので、
関数名は特に必要ないんですね。

また、①②の流れで

   var hoge2 = hoge;

と書くと、

   hoge2(str);

のように使うことができます。
違いは()を付けるかつけないかだけです。（括弧がないと関数じゃないみたいですね）
これは『関数参照』と言って、関数そのものを代入しているのではなく、
関数コードへの参照を代入しているということです。

onloadやonclickのようなコールバック関数にも関数参照が使えます。
onloadのようなコールバック関数はHTML属性を使って
   <body onload = "hoge();">
のようにイベントハンドラとしても
使えますが、関数参照を代入することによって
Javascript内でイベントハンドラと関数をつなげます。

   window.onload = hoge;   //onloadすると→window.onload();→hoge();

ただ関数参照は引数が渡せないので、引数を渡したいときは無名関数を使います。
③の書き方ですね。

   ④
   window.onload = function(){
       hoge();
       document.getElementById("***").onclick = function(){
           hoge2()
       }
   }

みたいな感じで。

これを使えばHTMLコードとJavascriptコードを完全に分離できます。
（この辺個人的にはかなりおぉ！と思いました。）
つまり、ページの構造とユーザのアクションによって起こる処理を
分けて書くことによって、アプリケーションの作成や
維持管理がより楽になるってことですね。

<理解したこと>
・Javascriptにおけるオブジェクトはすべて変数で、関数は実行可能な変数。
また、オブジェクトの中の変数をプロパティ、
プロパティの中で関数オブジェクトの参照を持ったものをメソッドと呼ぶらしい。
・HTML(構造)とJavascript(アクション)を完全に分離させるには
『無名関数』『関数参照』を使えば実現できる。