LoginSignup
44
45

More than 5 years have passed since last update.

[JavaScript] 3. 即時関数 と jQuery.readyイベント関数

Last updated at Posted at 2015-11-30

  1. クラスの定義
  2. クラスの継承
  3. 即時関数 と jQuery.readyイベント関数
  4. 即時関数でクラス定義
  5. private プロパティ
  6. Object.defineProperty/ies でプロパティ/メソッド定義

JavaScriptの記述でとてもよく似ていて間違いや誤解をされやすいのが、 即時関数 と jQueryの readyイベント関数 です。
両者は記法がとてもよく似ていますが、動作が全く異なります。
間違いや誤解によって致命的な結果を招きますので、両者の違いをしっかりと理解して注意しましょう。

即時関数

文字通り「即時に実行、処理される関数」です。
これは JavaScript の実装 で jQuery とは無関係です。

即時関数
(function(仮引数, ...) {
    //
    // 即時に実行、処理したいコード
    //
})(引数)

関数 は通常、定義された後、別の箇所から呼び出された際に処理されます。
一方、 即時関数 は定義と同時に自動的に呼び出されて処理されます。つまり、 関数定義がロードされた瞬間 に実行されます。

readyイベント関数

jQuery に実装されているイベント処理関数です。
HTMLドキュメントが全てロードされ、DOMにアクセスができる準備が完了した後に処理されます。すなわち、 全てのロードが完了した後 に実行されます。

readyイベント処理
$(function() {
    //
    // ロード完了後に実行、処理したいコード
    //
})

このように即時関数ととてもよく似ています。
似ていますが、実行されるタイミングがまったく異なります。

注意ポイント

  • 先頭の「$」の有無
    • 「$」があれば readyイベント、無ければ即時関数。
  • 最後尾の「(引数, ...)」の有無
    • readyイベントには「(引数, ...)」は無い。即時関数には「(引数, ...)」を付ける

readyイベントの本来の記法

なお、前述のreadyイベントの記法は簡略化されたものです。
本来は以下のように記述しますが、簡略記法を使用するのが一般的です。

readyイベントの本来の記法
$(document).ready(function() {
    //
    // ロード完了後に実行、処理したいコード
    //
})

JavaScriptの本来の実装

さらに、jQueryのreadyイベントは、JavaScript本来の load イベントの処理を簡略化したものです。

JavaScriptのloadイベント処理
document.addEventListener( 'DOMContentLoaded', function() {
    //
    // ロード完了後に実行、処理したいコード
    //
});
44
45
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
44
45