3

通常（常にではないにしても）、jQueryでクリックなどのJSイベントにコールバックを追加できる場合、コールバック関数でthis、イベントをトリガーしたDOM要素に「意味」を変更します。

これは非常に便利ですが、次の例のように、jsでOOPコードを記述するときに邪魔になります。

function MyClass() {}

MyClass.prototype = {

    init: function() {
        $("#someSpan").click(this.doSomething);
    },

    doSomething: function() {
        alert("Here 1");
        this.test();
        return false;
    },

    test: function() {
        alert("Here 2");
    }
}

この例でthis.test()は、は機能thisしません。これは、上のインスタンスではMyClassなく、代わりにjQuery DOM要素（スパン）であるためです。

私の質問は次のとおりです。このパターンを使用してJSでOOPコードを記述し続け、jQueryも使用する方法はありますか？そして：this最初の引数と同じくらい簡単にjQuery DOM要素を送信できるのに、なぜjQueryはコールバック関数で変更されるのですか？

4

1 に答える 1

5

jQueryには$.proxy次のように使用できます。

function MyClass() {
    this.clicked = $.proxy(this.clicked, this);
}

MyClass.prototype = {

    clicked: function(e) {
        alert("Here 1");
        this.test();
        e.currentTarget; //this replaces "this"-the keyword used in "non OOP" contexts
//see http://api.jquery.com/event.currentTarget/
    },

    init: function() {
        $("#someSpan").click(this.clicked);
    },

    test: function() {
        alert("Here 2");
    }
}

.clickedインスタンスを作成すると、そのインスタンスは、プロトタイプの汎用インスタンスをシャドウイングする独自の関数を取得します。thisどのように呼んでも、常に同じバインディングがあります。だから、あなたはあちこちを通り過ぎthis.clickedてそれを動かすことができます。

于 2012-06-25T22:35:31.260 に答える