jQuery.proxy(function, context)


version 1.4 以降

解説

特定のコンテキストを保持した関数を返します。
関数内での this を指定することができます。

引数の形が2種類あります。

type1

引数

  • function
    Function: コンテキストを変更する関数
  • context
    Object: 関数内での this オブジェクトとして指定するオブジェクト

戻り値

  • Function: 指定したオブジェクトを context とする関数。
type2

引数

  • context
    Object: コンテキストの関数を含むオブジェクト
  • name
    String: 関数名 (コンテキストのプロパティである必要があります。)

戻り値

  • Function: context の this を持つ、name で指定した関数。

「Non proxy」ボタンを押すと、イベントハンドラ内の this は、「Non proxy」ボタンのオブジェクトとなり、this.data が存在しないので "undefined" と表示されます。

「Use proxy 1」ボタンを押すと、this を obj とした イベントハンドラ showData 関数が呼び出され、"obj context." と表示されます。

「Use proxy 2」ボタンも、記述が異なるだけで、動作は同じです。

各ボタンをクリックして、コードと動作を確認してみてください。

var obj = {
    data: "obj context.",
    showData: function() {
        alert(this.data);
    }
}

// click イベントハンドラ内の this は、#non_propxyのオブジェクト。
// this.data が存在しないので undefined
$("#non_propxy").click(obj.showData);

// type 1
// showData 関数の this を obj にして、イベントハンドラに登録。
$("#with_propxy1").click($.proxy(obj.showData, obj));

// type 2
// obj の this を持つ、showData 関数を、イベントハンドラに登録。
$("#with_propxy2").click($.proxy(obj, "showData"));