jQuery $.proxy のメモ

いつも忘れるのでこっちにも書いておく。

// 1, $.proxy を使わない

var obj = {
  name: "John",
  test: function() {
    console.log(this); // => <input class="buttons" type="button" value="buttons_1"> (this は bind された .buttons の element)
    alert(this.name); // => ''
  }
};

$(".buttons").click(obj.test);

// 2, $.proxy を使う

var obj = {
  name: "John",
  test: function() {
    console.log(this); // => Object name=John (this は $.proxy で渡した Object 自身)
    alert(this.name); // => 'John'
  }
};

$(".buttons").click($.proxy(obj, 'test'));

// 3, $.proxy を使い bind された要素も取得

var obj = {
  name: "John",
  test: function(event) {
    console.log(event.currentTarget); // => <input class="buttons" type="button" value="buttons_1"> (event.currentTarget として bind された要素を取得する)
    console.log(this); // => Object name=John (this は $.proxy で渡した Object 自身)
    $(event.currentTarget).unbind("click", obj.test);
  }
};

$(".buttons").click($.proxy(obj, 'test'));