共通テーマ：
JavaScript テーマに参加中！

本題に入る前に、

普通に関数を作って実行するとき

var foo = function() {
  …
};
foo();

としますよね。

この動作を普通に説明すると、

  • 無名関数をfooに代入
  • fooを実行

という感じになりますが、もう少し細かく分解して、

function(){}はその関数の参照を値に持つ

JavaScriptでは、functionの代入は参照を渡すので、

var foo = function() {
  …
};
  • は左辺のfunction(){}は、自身への参照値を持ち、
  • それをfooに代入

していることがわかります。

関数の参照にカッコ()を付けると、関数を実行する

次に、普段なんとなく使っている

foo();

これは

  • foo（参照）に演算子()を付けると、関数が実行される

…という事をあらわしていますね。

ということで、fooもカッコを付けないと参照だし、function(){}の値も参照です。

だったら、

foo();

のfooのところをfunction(){}に置き換えても動くんじゃないか…という事で、

function(){}にカッコ()を直接付けてみる

function(){
  …
}();

エラーが出ました＞＜

どうやらfunctionが行頭にあると、式（値を持つ）ではなく、文（値を持たない命令）として解釈され、
参照値を持たないものに演算子()を付けたためエラーが出たようです。

参考：IT戦記：(function(){})() と function(){}()

function(){}をカッコで囲めば式として解釈され、晴れて関数への参照値を持つことができます。

ということで、

function(){}をカッコで囲んで

(function() {
  …
})();

出来上がり！

以上を踏まえて、更に

引数を渡す

(function(foo) {
  alert(foo)	// 「bar」と表示
})('bar');

戻り値を受け取る

var foo = function() {
  return 'bar';
}();
alert(foo);		// 「bar」と表示

↑はfunctionが行頭にないので、function(){}をカッコで囲む必要がない

無名オブジェクトの場合は？

法則はだいたい同じ。

無名オブジェクから、メソッドを即実行

↓構文エラー

{ foo: function(){ alert('bar'); } }.foo();

↓カッコ()を付ければ動く

({ foo: function(){ alert('bar'); } }).foo();	// barと表示

↓はカッコ()がいらない。

var baz = { foo: function(){ return 'bar'; } }.foo();
alert(baz);			// barと表示

「JavaScript」カテゴリの最新記事

タグ ：