74

jQueryを使用して「コントロール」を作成し、jQuery.extendを使用して、可能な限りOOにするのを支援しました。

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

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

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

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

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

jQueryのやり方とは？

4

8 に答える 8

104

匿名関数で使用できますがjQuery.proxy()、「context」が2番目のパラメーターであることは少し厄介です。

 $("#button").click($.proxy(function () {
     //use original 'this'
 },this));
于 2011-04-20T07:53:54.867 に答える
39

私はあなたのやり方が好きですが、実際には同様の構造を使用しています:

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

および this.onClick の最初の行:

var self = event.data.self;

クロージャーを使用することなく、クリックされた要素 (として this) と「this」オブジェクトの両方を self として取得できるため、この方法が気に入っています。

于 2009-12-30T22:50:23.910 に答える
33

jQueryにはjQuery.proxyメソッドがあります（1.4以降で利用可能）。

例：

var Foo = {
  name: "foo",

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

$("#test").click($.proxy(Foo.test, Foo))
// "foo" alerted
于 2011-02-14T11:32:46.110 に答える
21

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));

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

例：

function foo() {
    alert(this);
}

var myfoo = foo.createDelegate("foobar");
myfoo(); // calls foo() with this = "foobar"
于 2009-02-06T13:59:10.600 に答える
5

HTML 5 準拠のブラウザは、 IE 9 まで IE に組み込まれていませんが、おそらく最もクリーンな構文であり、フレームワークに依存しないbind メソッドを提供します。Function.prototype

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

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));
于 2014-04-24T18:24:32.757 に答える
4

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

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

var object = {coolValue: "bla"};


$("#bla").bind('click', coolFunction.bind(object));
于 2013-03-08T19:20:27.840 に答える
2

jQuery はバインドをサポートしていないため、推奨される方法は関数を使用することです。

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

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

Javascript のオブジェクト指向の概念は理解しにくく、関数型プログラミングの方が簡単で読みやすいことがよくあります。

于 2009-02-06T14:16:13.170 に答える
1

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

var self = this

$('.some_selector').each(function(){
  // refer to 'self' here
}
于 2009-02-06T14:38:03.690 に答える