,

[JavaScript General] immediate function pattern（即時関数）

公開日: 2016/08/04
更新日: 2019/01/11

用語の整理。

Contents

即時関数の書式

即時関数の書式は、(関数宣言)();。

  • 関数定義を読み込んだタイミングで即実行する。
  • 関数をスコープの枠組みとして使う。
// 普通に関数宣言と実行を書くと
function f(args) {
  :
}
f(args);
// 関数宣言を囲って匿名関数にし呼び出し
(function (args) {
  :
})(args);
  • 即時関数とは、「関数定義」「関数呼び出し」の2つをまとめて行なうことができるもの。
  • 即時関数がグローバル変数の使用を抑えることができる。
  • 即時関数を使えば内部で宣言した変数や関数はローカルに限定される。
    (関数宣言)(); について
  • 関数を式として評価させることで( )をケツにひっつけて呼び出せるようにする。
  • functionが行の先頭にあるなら関数宣言となり、それ以外なら関数は式であると言える。
  • 式として評価させる理由は「関数宣言のままだと関数呼び出し演算子の( )を使うことができないから」で、関数を式として評価させる方法は「functionキーワードを行の先頭におかない」こと。

ユースケース

  • ページの初期化
  • 機能判定
  • プライベートプロパティ／メソッドの定義
'use strict';
var counter = (function() {
  var count = 0;
  return {
    increment: function() {
      return count += 1;
    },
    decrement: function() {
      return count -= 1;
    }
  }
})();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.decrement()); // 1
console.log(counter.count);       // undefined

ES2015(ES6)の即時関数

let a = 'foo';
let b = 'bar';
{
  let a = 1;
  let b = 2;
  function add(a, b) {
    return console.log(a + b); // 3
  }
  add(a, b);
}
console.log(a + b); // foobar

即時関数 と jQuery.ready イベント関数は別物

JavaScriptの記述でとてもよく似ていて間違いや誤解をされやすいのが、 即時関数 と jQueryの readyイベント関数 です。

即時関数

  • 「即時に実行、処理される関数」。これは JavaScript の実装 で jQuery とは無関係。
(function(仮引数, ...) {
})(引数)

ready イベント関数

  • jQuery に実装されているイベント処理関数。HTMLドキュメントが全てロードされ、DOMにアクセスができる準備が完了した後に処理される。すなわち「全てのロードが完了した後に実行」される。
$(document).ready(function() {
})