$.proxy()

http://api.jquery.com/jquery.proxy/

関数内で実行されるthisを任意のオブジェクトに変更します。

$.proxy( function, context ) 1.4追加
$.proxy( context, name ) 1.4追加
$.proxy( function, context [, additionalArguments ] ) 1.6追加
$.proxy( context, name [, additionalArguments ] ) 1.6追加
デモ

$.proxy( function, context ) 1.4追加

戻り値:Function

引数	説明
function	コンテキストを変更したい関数を指定します。
context	関数をセットするコンテキスト(`this`)のオブジェクトを指定します。

$.proxy( context, name ) 1.4追加

戻り値:Function

引数	説明
context	関数をセットするコンテキストのオブジェクトを指定します。
name	コンテキストを変更したい関数名を指定します。

$.proxy( function, context [, additionalArguments ] ) 1.6追加

戻り値:Function

引数説明

function

引数	説明
function	型：`Function()` コンテキストが変更される関数を指定します。
context	型：`PlainObject` 関数のコンテキスト(`this`)として設定されるオブジェクトを指定します。
additionalArguments	型：`Anything` 関数へ渡される引数を任意の数だけ指定します。 `function`の引数として参照されます。

型：Function()

コンテキストが変更される関数を指定します。

context

型：PlainObject

関数のコンテキスト(this)として設定されるオブジェクトを指定します。

additionalArguments

型：Anything

関数へ渡される引数を任意の数だけ指定します。 functionの引数として参照されます。

$.proxy( context, name [, additionalArguments ] ) 1.6追加

戻り値:Function

引数説明

context

引数	説明
context	型：`PlainObject` 関数に設定されるコンテキストとなるオブジェクトを指定します。
name	型：`String` コンテキストを変更する関数の名前を指定します。 (`context`オブジェクトのプロパティにすべきです。)
additionalArguments	型：`Anything` `name`引数に寄って名前指定されている関数へ渡される引数を、任意の数だけ指定します。

型：PlainObject

関数に設定されるコンテキストとなるオブジェクトを指定します。

name

型：String

コンテキストを変更する関数の名前を指定します。 (contextオブジェクトのプロパティにすべきです。)

additionalArguments

型：Anything

name引数に寄って名前指定されている関数へ渡される引数を、任意の数だけ指定します。

このメソッドは、異なるオブジェクトにコンテキストが付け替えられてしまう要素に対して、イベントハンドラを割り当てる際に非常に便利です。更に、jQueryは例えjQuery.proxy()から返された関数をあなたがバインドしたとしても、その元が渡されれば正しい関数のバインドを解くことが出来ます。(翻訳に自信なし)

ただし、jQueryのイベント・バインディングのサブシステムは、バインドを解く際に関数を特定にするために、各イベントハンドラ関数に一意なIDを割り当てることに注意してください。 jQuery.proxy()によって表される関数は、例え異なるコンテキストにバインドされている場合であっても、イベントのサブシステムによって単一の関数とみなされます。誤ってハンドラのバインドを解いてしまう事を避けるために、proxyされた関数を指定するのでは無く、バインドとバインドを解くための一意のイベント名前空間(例: "click.myproxy1")を使用して下さい。

jQuery 1.6では、$.proxy()へ任意の数の追加引数を提供出来るようになり、それらはコンテキストが変更される関数へ渡されます。

jQuery 1.9では、コンテキストがnullまたはundefinedの場合、そのproxyされた関数はproxyが呼び出された際のthisと同じオブジェクトを使用して呼び出されます。こうすることで、$.proxy()はコンテキストを変更すること無く、関数の引数を部分的に適用するのに使用することが可能になります。

デモ

function, contextの記法を使用して、クリックイベント内で実行される関数のコンテキスト(this)を変更しています。最初のクリックの後に、1つ目のハンドラのバインドを解きます。

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p><button type="button" id="test">Test</button></p>
<div id="log"></div>
<script>
var me = {
  type: "zombie",
  test: function(event) {
    /* $.proxy()を使用しなければ、thisはイベント発生源である
       ボタン要素を参照します。 */
    var element = event.target;
    $(element).css("background-color", "red");

    /* $.proxy()を使用すれば、thisは指定したコンテキストを
       参照するようになります。 */
    $("#log").append( "Hello " + this.type + "<br>" );
    $("#test").unbind("click", this.test);
  }
};

var you = {
  type: "person",
  test: function(event) {
    $("#log").append( this.type + " " );
  }
};

/* このメソッドがどこで呼ばれてもコンテキスト(this)は
   youを参照するようになります。*/
var youClick = $.proxy( you.test, you );


$("#test")
  /* this は、meとなり、this.typeは "zombie"となります。
    最初のクリックでこのバインドは破棄されます。*/
  .click( $.proxy( me.test, me ) )

  /* this は、youとなり、this.typeは "person"となります。*/
  .click( youClick )

  /* this は、"me"となり、this.typeは "zombie"となります。*/
  .click( $.proxy( you.test, me ) )

  /* $.proxy()を使用していないため、this はボタン要素となり、
     this.typeは"button"となります。*/
  .click( you.test );
</script>
</body>
</html>

context, function nameの記法を使用して、関数のコンテキストを変更しています。最初のクリック実行後に、バインドが解かれています。

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p><button id="test">Test</button></p>
<p id="log"></p>
<script>
  var obj = {
    name: "John",
    test: function() {
      $("#log").append( this.name );
      $("#test").unbind("click", obj.test);
    }
  };

  $("#test").click( jQuery.proxy( obj, "test" ) );
</script>
</body>
</html>

追加の引数を使用して、クリックハンドラへバインドされる関数のコンテキストを変更します。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>jQuery.proxy demo</title>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<p><button type="button" id="test">Test</button></p>
<div id="log"></div>

<script>
var me = {
  // 私は犬です。
  type: "dog",

  // 引数eventが、引数oneとtwoの"後ろ"に来る事に注意してください
  test: function( one, two, event ) {
    $( "#log" )

      // $.proxy呼び出し時の1つ目の追加引数「one」は、
      // youにマッピングされます。
      .append( "<h3>Hello " + one.type + ":</h3>" )

      // 'this'キーワードは「me」を参照します。
      // ($.proxyの2つ目の引数はコンテキストです)
      .append( "I am a " + this.type + ", " )

      // $.proxy呼び出し時の2つ目の追加引数「two」は、
      // 'they'にマッピングされます。
      .append( "and they are " + two.type + ".<br>" )

      // イベントのタイプは"click"です。
      .append( "Thanks for " + event.type + "ing." )

      // クリックされた要素は「event.target」であり、
      // そのタイプは"button"です。
      .append( "the " + event.target.type + "." );
  }
};

var you = { type: "cat" };
var they = { type: "fish" };

// 「me」のコンテキスト内で、「you」と「they」を追加の引数として
// me.text()を実行するハンドラを設定します。
var proxy = $.proxy( me.test, me, you, they );

$( "#test" )
  .on( "click", proxy );
</script>

</body>
</html>