- ブログネタ:
- 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と表示
![Eclipse + ChromeでJavaScriptデバッグ [Google Chrome Developer Toolsインストール編]](https://resize.blogsys.jp/7061d103cdf4023bd0432e6d14fd9030ccbd44a0/crop1/100x100_ffffff/http://livedoor.blogimg.jp/eeu/imgs/e/0/e0cb906b.gif)
![Eclipse + ChromeでJavaScriptデバッグ [Google Chrome Developer Toolsインストール編]](https://resize.blogsys.jp/f86fa58193158d24484b5579aba301d8465044e0/crop1/100x100_ffffff/http://livedoor.blogimg.jp/eeu/imgs/4/f/4f5406de.gif)
![Eclipse + ChromeでJavaScriptデバッグ [Google Chrome Developer Toolsインストール編]](https://resize.blogsys.jp/47cee24316990c5bf1b72aea44db66886e569c28/crop1/100x100_ffffff/http://livedoor.blogimg.jp/eeu/imgs/1/a/1af167ad.gif)
![Eclipse + ChromeでJavaScriptデバッグ [Google Chrome Developer Toolsインストール編]](https://resize.blogsys.jp/a71a027fc1a6cf5cfcd30133293a8ec5a94d487c/crop1/100x100_ffffff/http://livedoor.blogimg.jp/eeu/imgs/0/2/02fa5750.gif)
![Eclipse + ChromeでJavaScriptデバッグ [Google Chrome Developer Toolsインストール編]](https://resize.blogsys.jp/e19e52d0d0e56a97cb4dc95dedccf5c89f2ec3f8/crop1/100x100_ffffff/http://livedoor.blogimg.jp/eeu/imgs/8/e/8e11782c.gif)
![Eclipse + ChromeでJavaScriptデバッグ [Google Chrome Developer Toolsインストール編]](https://resize.blogsys.jp/cea87a3a1baa82d379c77dde461963850426b855/crop1/100x100_ffffff/http://livedoor.blogimg.jp/eeu/imgs/e/9/e93e7fd2.gif)
![Eclipse + ChromeでJavaScriptデバッグ [Google Chrome Developer Toolsインストール編]](https://resize.blogsys.jp/bcd02a36706c2768e1880ea85f7fb635067179ff/crop1/100x100_ffffff/http://livedoor.blogimg.jp/eeu/imgs/b/d/bd37cf4a.gif)
![Eclipse + ChromeでJavaScriptデバッグ [Google Chrome Developer Toolsインストール編]](https://resize.blogsys.jp/1a42734cbdc841304b4b2c4fa37bb096c60bb157/crop1/100x100_ffffff/http://livedoor.blogimg.jp/eeu/imgs/b/b/bbc9870a.gif)
![Eclipse + ChromeでJavaScriptデバッグ [Google Chrome Developer Toolsインストール編]](https://resize.blogsys.jp/ddca061b7482d5ab0c25fa2f5cb097ae17f20d16/crop1/100x100_ffffff/http://livedoor.blogimg.jp/eeu/imgs/1/4/14a1b359.gif)
どうでもいいコメントですが、よろしいでしょうか。
こちらのブログがカテゴリアーカイブのページだけ新共通ヘッダーが表示されない理由ですが、阿闍梨だったら、たぶん、もうご存知かと思います。
そう、奴は、<body>に反応するのです(笑)
bodyタグを独自タグの条件式で括るとヘッダー周りのソースが書き出されずこうなるようです。ちょっとしたバグでしょうか。ていうかこちらの場合そもそもナレッジの過去の私の回答(タグ別ページでスタイルというかclass名を変える方法)が原因なのですがw
ということは逆に、この新共通ヘッダーというものは、無料版でも驚くほど簡単に消せてしまう、ということになってしまいますよね。bodyを挟む条件式をIfPreviewmodeとかにすればすべてのページで適用できるわけだし。
中の人に教えてあげたほうがいいでしょうか。
fixdapに裏技と称して思いっきり書き込んじゃおうかな。
他の多数の要望と共に、中の人に見てもらいたい一心で