無名関数と即時関数の違いとは?

このQ&Aのポイント
  • 無名関数とは、名前のない関数のことです。jQueryの$(function() {})も無名関数ですが、DOMを読み込み終わった後に実行されるという特性があります。
  • 即時関数ではないfunction() {}の部分も無名関数です。これはeach()メソッドの中で使用されているもので、関数の内容を実行するための構文です。
  • jQueryの書き方では、何かしらのイベントが発生した時に処理を実行するために無名関数を使用することが一般的です。無名関数の中身は、その処理が実行される際に実行される部分です。
回答を見る
  • ベストアンサー

function()は無名関数?

jqueryの$(function() は無名関数だと思いますが、redyが省略されているので、DOMを読み込み終わってから実行とも聞きます。 両方の意味があるのでしょうか? 一見ダダの無名関数に見えますがどのように区別するのでしょうか? 下記の部分もfunction()があるのですがこちらもまた無名関数のなのですか? ただ即時関数ではないので変数などに入れて、関数の呼び出しをしないといけないのにその記載がなくても実行されるのはなぜでしょうか? each(function() $(function() { $(".textbox").each(function(){ var labelText = $(this).val(); $(this).focus(function(){ if( $(this).val() == labelText ){ $(this).val(""); } }).blur(function(){ if( $(this).val() =="" ){ $(this).val(labelText); } }); }); }); 補足 $(".textbox").each(function(){ var labelText = $(this).val(); $(this).focus(function(){ if( $(this).val() == labelText ){ $(this).val(""); の部分は無名関数の中身、つまりこの関数が実行されるときの中身のことなのでしょうか? jqueryだと何となくこの書き方をしているのですがJSの基礎で考えるとそのようになりますよね?

noname#226032
noname#226032

質問者が選んだベストアンサー

  • ベストアンサー
  • imq
  • ベストアンサー率72% (16/22)
回答No.2

JavaScriptの関数が参照で渡されていくという原理は分かりますか? 無名関数がいくつあっても他のもの間違って実行されることはありません。 質問文にある$(function()はひとくくりの分ではありません。  $(function(){…}); 無名関数を定義して参照を$関数に渡しています。 以下のように参照を一旦aに入れて分けて書くこともできます。  var a = function(){…};  $(a); jQueryでは$関数の中で、参照で受け取った無名関数をページ読み込み後に実行するようにJavaScriptで記述されています。

noname#226032
質問者

お礼

初心者なのでまだそこまではわかっておりません。 恐縮です。 ただ function(){…}; はイベントファンクションなどに出てきますがこれもやはり無名関数なのですね。 最後に()で引数を渡す部分がなければ、 function(){…};ときたものはどんな場合も無名関数と思っていよさそうですね。

その他の回答 (1)

  • imq
  • ベストアンサー率72% (16/22)
回答No.1

function(){}は関数のリテラル表記で、それ自体の参照を値として持っています。 例えば関数を定義して実行するとき、以下の表記をすることがあります。  var a = function(){…};  a(); これは関数をリテラルで定義し、aに関数への参照を代入し、関数への参照値をもつaに()を付けて関数を実行しています。 質問にあるjQueryについてですが、  $(function(){…}); の表記は、リテラルで関数の中身を定義しつつ、$関数の引数に定義した関数の参照を渡し、さらに$関数を実行しています。 $関数の中では引数として関数への参照が来た場合、readyメソッドを実行するようにできています。 readyメソッドは渡された関数への参照をDOMが読み終わったときに実行するようにセットし、時が来たら関数が実行されます。 これを踏まえると即時関数は特殊な構文ではないことが分かると思います。 参照値を持つ関数リテラルに直接()を付けてその場で実行するというテクニックの1つです。

noname#226032
質問者

お礼

回答はありがたいのですが、初心者なので、難しくてわかりません。 もう少し初心者にもわかるように教えていただければ幸いに存じます。

関連するQ&A

  • 無名関数を使うメリットは何ですか?

    Javascriptに限らず、多くのプログラム言語で無名関数が使えると思います。以下の2つの記述法は、挙動に違いは全くありませんよね? function func() { return "普通の関数です。"; } var func = function() { return "無名関数です。"; } なぜ無名関数を使うのか調べてみたところ、「最近Ajaxが流行ってきてライブラリを使う機会が増えてきた。それらを利用する際、関数の名前が重複して誤作動するのを防げる」という答えを見つけました。しかし試してみたところ var func = function() { return "無名関数1です。"; } var func = function() { return "無名関数2です。"; } alert(func()); のように名前が被った場合、従来と同じで後に書かれた関数が動作します。イベント駆動型関数を無名関数にするメリットは分かります。たとえば window.onload = function() { alert("ウィンドウの読み込みが完了しました。"); } と書けば、他の関数との衝突によってこの関数が動作しないことはありません(ライブラリを使ってwindow.onloadが重複してしまったら別問題ですが)。 結局のところ、無名関数を使うメリットは何なのでしょうか?

  • 複数の無名関数を合成したい

    javascriptにおいて、無名関数を合成する方法を知っている方はいらっしゃるでしょうか? var func1 = function(){     alert('func1'); } var func2 = function(){     alert('func2'); } この二つの関数を合成して、 var func3 = function(){     alert('func1');     alert('func2'); } という風に合成したいのです。 jQueryを利用して var func3 = $.extend(func1, $func2); と試しましたが、func3 == func1 となってしまうようです。 また、単純に、var func3 = func1 + func2; では、 func3 = function(){alert('func1');}function(){alert('func2');} と意味を成さないものになってしまいます。

  • jQueryの関数から変数を取得

    次のうち変数valを取得してこれとは別の関数で利用したいのですが、どうやればこの変数を取得出来るのでしょうか? 単純な関数だと関数名を付けて戻り値にvalを指定してそれを呼び出してあげれば良いと思うのですが、この場合はどうしたら良いのか分からず頭を悩ませています。 var timer = false; var replaceWidth = 320; var prefWidth = parseInt( $( window ).width() ); $( window ).resize( function () { if( timer !== false ) { clearTimeout( timer ); } timer = setTimeout( function () { var self = $( this ); var windowWidth = parseInt( $( window ).width() ); if( windowWidth <= replaceWidth && replaceWidth < prefWidth ) { var val = 1; } else if( replaceWidth < windowWidth && prefWidth <= replaceWidth ) { var val = 10; } prefWidth = windowWidth; }, 200 ); });

  • function()とはこれから関数をかきますとい

    function()とはこれから関数をかきますという宣言なのでしょうか? doctype宣言のようなイメージでしょうか? $('button’).click(function(){ $(’div.anime’).animation('width','100%'); }) その場合上記は無名関数に当たりますよね。 評価をしていないのになぜ実行されるのでしょうjか? また、function()はあちっこっちで出てきて、この場合は何なんだろうと混乱しませんか?

  • JavaScriptの関数に渡される引数について

    Yahoo!知恵袋(http://detail.chiebukuro.yahoo.co.jp/qa/question_detail.php?qid=1469303224)に質問したのですが、補足の文字数が少ない上、返信が出来ないため、申し訳ございませんがこちらで質問させていただきます。 ご回答の中で無名関数というのは分かったのですが、やはりどうしても各プロパティの引数の挙動が分かりません。 445行目のEnumerable.each、521行目のinclude等の場合はどうなのでしょうか? 521: include: function(object) { 522: var found = false; 523: this.each(function(value) { 524: if (value == object) { 525: found = true; 526: throw $break; 527: } 528: }); 529: return found; 530: }, の場合はEnumerable.include(a)と使うと思うのですが、この場合object=aでしょうがvalueには一体何が入っているのでしょうか? value==(object=a)の式比較の意味が分かりません。 それまで存在していないのでundefinedとかかなと思うのですが、それでは意味が通じませんので。 445: var Enumerable = { 446: each: function(iterator) { 447: var index = 0; 448: try { 449: this._each(function(value) { 450: iterator(value, index++); 451: }); 452: } catch (e) { 453: if (e != $break) throw e; 454: } 455: return this; 456: }, の場合もiterator、valueの引数も分かりませんし、iteratorという関数を無名関数の中で使用しているようですが、自分には挙動がちょっと分かりませんでした。

  • 無名関数?

    こんにちは jQuery.fileupload.jsのソースコードを覗いていたのですが いきなり下記のような書き方でコードが表示されていたのですが 意味が分からず悩んでいます。 ======================= (function (factory) { 'use strict'; :     : } (function ($, tmpl, loadImage) {     :     : })); ======================= 最初は無名関数が複数並んでいるのかと思い下記のように修正してみましたが エラーが発生してしまいました。 ======================= (function (factory) { 'use strict'; :     : }); (function ($, tmpl, loadImage) {     :     : }); ======================= 調べてみても上記の書き方をしているサイトが見つからず悩んでます。 ご存知の方がいたら無知な自分に教えて頂けますでしょうか。 よろしくお願いいたします。

  • onChange2回実行

    すみません。 今は下記のようにjquery.1-4-2.min.jsを利用しています。 -------------------------------------- $(function() { var el; $("select.default") .each(function() { el = $(this); el.data("origWidth", $(this).css("width")) }) .mouseenter(function(){ $(this).css("width", "auto"); if(($(this).context.clientWidth)< Number($(this).data("origWidth").replace(/px/,"")) ||"100%" == $(this).data("origWidth")){ $(this).css("width", $(this).data("origWidth")); } }) .bind("blur change", function(){ el = $(this); el.css("width", el.data("origWidth")); }); }); ------------------------------------ Htmlでselectドロップダウンについて、onchange=onUserChange(value)をします。 但し、select dropdownを選択したら、このonUserChangeが二度呼び出されました。 ソースDebugし、下記のJquery利用するため二度実行します。 ----------------------------------- .bind("blur change", function(){ el = $(this); el.css("width", el.data("origWidth")); }); ------------------------------------ どうしてonUserChangeが二度実行しますか。私は一回だけ欲しいです。。。 ご教えていただけませんか。

  • 関数を呼んだら、その中の関数も自動実行される?

    ・関数の実行タイミングが分からないので教えてください ・下記で、どうして引数が渡るのでしょうか? ・portal関数を呼んだら、gooプロパティに無名関数が格納される(?)と思うのですが、=関数実行になるのでしょうか? ・無名関数だから? var obj = {  portal : function( arg ) {   var goo = function(arg){    console.log(arg);   }(arg);  } } obj.portal("あ"); ・自分的には、portal関数を呼んで変数gooに無名関数を格納(?)した後、明示的にgoo();と呼ぶ必要があると思うのですが… ・下記でTypeErrorエラーになるのは、gooプロパティが2回呼ばれるから? ・明示的に呼んだ2回目は引数が渡らないから? var obj = {  portal : function( arg ) {   var goo = function(arg){    console.log(arg);   }(arg);   goo();  } } obj.portal("あ"); //TypeError: undefined is not a function

  • jQueryのfocus,blurが機能しません。

    初めまして。jquery初心者です。宜しくお願いします。 フォームの入力項目に『検索したい言葉を入力してください』だとか、『お名前を入力してください』というテキストが薄い色で入っていて、テキスト内をクリックして入力状態になると、中のテキストが消えるというしくみをjQueryでやっているのですが、上手く行きません。 <HTML> <form name="form1" method="post" action="https://www.rescue.ne.jp/form/mail.cgi"> <p> <label for="namae">お名前</label> <input class="guideText" type="text" name="namae" id="namae" value="お名前を入力してください。"> </p> <p> <label for="email">メールアドレス</label> <input class="guideText" type="text" name="email" id="email" value="メールアドレスを入力してください。"> </p> <p> <label for="comment">お問い合わせ内容</label> <textarea class="guidetext" name="comment" id="comment">メッセージを入力してください。</textarea> </p> <p> <input type="submit" name="button" id="button" value="お問い合わせ送信"> </p> </form> 一番上の『お名前を入力してください。』の部分だけ機能しますが、文字の色が 最初サイトを開くと黒になり、テキストをクリックすると文字が消え、フォーカスを外すと薄いグレーになります。これを、最初から薄いグレーで表示させたいのと、『メールアドレス』『お問い合わせ内容』も同じようにfocus,blurを適用させたいです。 // JavaScript Document $(function(){ $('.guideText').each(function(){ var guideText = this.defaultValue; var element = $(this); element.focus(function(){ if(element.val()===guideText){ element.val(''); element.removeClass('guide'); } }); element.blur(function(){ if(element.val()===''){ element.val(guideText); element.addClass('guide') } }); if(element.val()===guidetext){ element.addClass('guide'); } }); }); <HTML>では、class="guidetext"とすべて適用させてるのに上手く機能しません。 自分では限界なので相談させていただきました。 どうか、宜しくお願い致します。

  • 即時関数で

    即時関数(無名関数)でsetTimeoutを繰り返す方法はありますでしょうか?setIntervalではなく。 var testDo=function(){ setTimeout(function(){ 何かの処理 testDo(); //★実行されない },600); }(); //即時関数 即時なのでtestDoという名前も不要だと思いますが。。。 よろしくお願いします。