1

JSFiddle: http://jsfiddle.net/M2ALY/3/

私の目標は、使用および配布できるモジュールを作成することです。したがって、グローバル名前空間を汚染してはなりません。私が作成しているモジュールも、1 つの Web ページで複数回使用される予定です。そのため、OOP を使用することにしましたが、これには問題がありました。

ユーザーが DOM の要素をクリックしたときに実行される関数をオブジェクトにバインドする必要があります。私が作成したこの単純化された例では、ユーザーが段落をクリックしたときに警告ボックスがポップアップするようにします。例として、私が取り組んでいる実際のプロジェクトで必要なことの 1 つは、ユーザーがキャンバスをクリックすると、関数がユーザーがクリックした場所を特定し、それを this.clientX と this.clientY に保存することです。

する代わりに

this.bind = function() {
    $("p1").bind('click', function() {
        // code here
    });
}

私がやればうまくいくと思いました：

this.bind = function() {obj.codeMovedToThisMethod()}

問題は、これが適切な設計ではないことです。「クラス」内では、この「クラス」から作成されるオブジェクトの名前を知る必要はありません。「クラス」の複数のオブジェクトを作成しているとき、これは良くなりません...

だから私はできると思った

$("p1").bind('click', function(this) {
        // code here
    });
}

しかし、これを関数に送信すると思ったように機能しなかったため、機能しませんでした。

この問題を解決するにはどうすればよいですか? ここに簡単なサンプル問題があります。(JSFiddleと同じ。)

var test = function() {
    this.alert = function() {
        alert("Hi");
    }

    this.bind = function() {
        $("#p1").bind('click', function() {
            obj.alert();
        });
    }        
}

window.obj = new test();
obj.bind();

// What if I want to do this:

var test2 = function() {
    // Private vars
    this.variable = "This secret is hidden.";

    this.alert = function() {
        alert(this.variable);
    }

    this.bind = function() {
        $("#p2").bind('click', function(this) {
            obj2.alert();
            this.alert();
        });
    }        
}

window.obj2 = new test2();
obj2.bind();​

ありがとう！

4

1 に答える 1

2

MDN のキーワードの紹介をthis読んでください。これはキーワードであるため、パラメーター名として使用することはできません。

どちらかを使用

this.bind = function() {
    var that = this;
    $("#p2").on('click', function(e) {
        that.alert();
        // "this" is the DOM element (event target)
    });
}

または、次の関数$.proxyに相当する jQuery クロスブラウザ:bind()

this.bind = function() {
    $("#p2").on('click', $.proxy(function(e) {
        this.alert();
    }, this));
}
于 2012-10-16T11:27:04.283 に答える