web-dev-qa-db-ja.com

jQueryイベントで「this」の値を制御する

JQueryを使用して「コントロール」を作成し、jQuery.extendを使用して、可能な限りOOとして作成できるようにしました。

コントロールの初期化中に、さまざまなクリックイベントを接続します

jQuery('#available input', 
            this.controlDiv).bind('click', this, this.availableCategoryClick);

Bindメソッドのデータ引数として「this」を使用していることに注意してください。これは、クリックイベントを発生させる要素からではなく、コントロールインスタンスに添付されたデータを取得できるようにするためです。

これは完全に機能しますが、より良い方法があると思います

過去にPrototypeを使用したことがありますが、イベントの「this」の値を制御できるバインド構文を覚えています。

JQueryの方法は何ですか？

jqueryscopethis
72
Pat Long - Munkii Yebee

jQuery.proxy() を匿名関数で使用できますが、「コンテキスト」が2番目のパラメーターであることが少し気まずいです。

 $("#button").click($.proxy(function () {
     //use original 'this'
 },this));
100
Torbjörn Nomell

私はあなたの方法が好きです、実際には同様の構造を使用します：

$('#available_input').bind('click', {self:this}, this.onClick);

this.onClickの最初の行：

var self = event.data.self;

この方法が好きなのは、クロージャーを使用せずに、要素としてクリックされた要素（これとして）と "this"オブジェクトの両方を自分自身として取得するためです。

37
davidfurber

jQueryには jQuery.proxy メソッド（1.4以降で使用可能）。

例：

var Foo = {
  name: "foo",

  test: function() {
    alert(this.name)
  }
}

$("#test").click($.proxy(Foo.test, Foo))
// "foo" alerted
32
benpickles

JQueryにはそのための組み込み機能があるとは思わない。ただし、次のようなヘルパー構造を使用できます。

Function.prototype.createDelegate = function(scope) {
    var fn = this;
    return function() {
        // Forward to the original function using 'scope' as 'this'.
        return fn.apply(scope, arguments);
    }
}

// Then:
$(...).bind(..., obj.method.createDelegate(obj));

このようにして、指定されたオブジェクトを「this」スコープとしてメソッドを呼び出すcreateDelegate（）を使用して、動的な「ラッパー関数」を作成できます。

例：

function foo() {
    alert(this);
}

var myfoo = foo.createDelegate("foobar");
myfoo(); // calls foo() with this = "foobar"
21
Ferdinand Beyer

HTML 5に準拠したブラウザは、Function.prototypeで bind method を提供します。これは、おそらく最もクリーンな構文であり、フレームワークに依存しませんが、IE IE 9.（ただし、ブラウザがない場合は polyfill があります。）

例に基づいて、次のように使用できます。

jQuery('#available input', 
        this.controlDiv).bind('click', this.availableCategoryClick.bind(this));

（補足：このステートメントの最初のbindはjQueryの一部であり、Function.prototype.bindとは関係ありません）

または、もう少し簡潔で最新のjQueryを使用する（および2種類のbindsからの混乱を排除する）場合：

$('#available input', this.controlDiv).click(this.availableCategoryClick.bind(this));
5
JLRishe

次のようなjavascript bind メソッドを使用できます。

var coolFunction = function(){
  // here whatever involving this
     alert(this.coolValue);
}

var object = {coolValue: "bla"};


$("#bla").bind('click', coolFunction.bind(object));
4
Orlando

jQueryはバインドをサポートしていないため、関数を使用することをお勧めします。

JavaScriptでは、this.availableCategoryClickはこのオブジェクトでavailableCategoryClick関数を呼び出すことを意味しないため、jQueryは次の推奨構文を使用することを推奨します。

var self = this;
jQuery('#available input', self.controlDiv).bind('click', function(event)
{
   self.availableCategoryClick(event);
});

Javascriptのオブジェクト指向の概念は理解するのが難しく、多くの場合、関数型プログラミングはより簡単で読みやすいです。

2
Vincent Robert

関数がスコープを変更するのを見て、最も一般的な方法は、var self = this。

var self = this

$('.some_selector').each(function(){
  // refer to 'self' here
}
1
August Lilleaas