$(function(){ });やjQuery(function ($) { });と即時実行 : jQuery

Tweet

Pocket

$(function(){ });やjQuery(function ($) { });の意味と即時実行のメモ(かなり曖昧で不正確だと思う)。

即時実行の利点は変数名(関数名)を宣言することなく関数を実行できること(即時実行 (function(){}()), (function(){})() : JavaScrip)。

即時実行の構文

(function () {
    // ・・・処理・・・
}());
// または
(function () {
     // ・・・処理・・・
})();

『JavaScript パターン』(Stoyan Stefanov 2011)は前者を推奨している。

例

// 通常
var add = function (a, b) {
    return a + b;
}
$result = add(10, 20) 
console.log($result); // 30

// 即時呼び出し
$result =  function (a, b) {return a + b; }(30, 40);
console.log($result); // 70;

// 引数が関数
var hoge = function (f) {
    console.log(f(50, 60));
};
hoge(function (a, b) { return a + b; }); // 110

$(function(){ });やjQuery(function ($) { });と即時実行

$(function(){ });やjQuery(function ($) { });との関連についてのメモ。

var MY = function (f) {
    f(); // 即時実行
}
MY(function () { alert('Hello World'); });

$(function () { });やjQuery(function ($) { })の変数$やjQueryはjQueryファイルで定義されておりfunction () { }やfunction ($) { }の部分にあたる引数を記述する。

» jQueryをmootoolsなどの他のライブラリと干渉しないようにする方法まとめ :: 5509

(function (msg) { alert(msg); }('Hello World'));   //  ○ 実行できる
function (msg) { alert(msg); }('Hello World');     // × 実行できない

即時実行でfunctionが頭にくる場合は括弧()で全体を囲む理由は下記に詳しい解説がある。
» (function(){})() と function(){}() – IT戦記