2

プロトタイピングを使用してJavascriptの「クラス」を作成しています。1番目と2番目のブロックが機能せず、3番目のブロックが機能する理由がわかりません。最初の/2番目のブロックについては、「オブジェクト＃にはメソッド'validate'がありません」というメッセージが表示されます。なぜそれを行うのですか、そしてブロック3は正しい方法ですか？

-編集 私はこれをChrome/FFでテストしました

--Edit2次のコマンド でテストプロトタイプを呼び出す場合：var test = new Test（）;

そして、ログインプロトタイプでテスト変数を呼び出します。

ブロック1

    機能テスト（）{
        this.init（）;
    }

    Test.prototype.init = function（）{
        $（ "。login"）。click（this.login）;
    };

    Test.prototype.login = function（event）{
        event.preventDefault（）;

        this.validate（）;

        console.log（ "login"）;
    };

    Test.prototype.validate = function（）{
        console.log（ "validate"）;
    };

new Test（）;

ブロック2

    機能テスト（）{
        this.init（）;
    }

    Test.prototype.init = function（）{
        $（ "。login"）。click（this.login）;
    };

    Test.prototype.login = function（event）{
        var self = this;
        event.preventDefault（）;

        self.validate（）;

        console.log（ "login"）;
    };

    Test.prototype.validate = function（）{
        console.log（ "validate"）;
    };

    new Test（）;

ブロック3

    機能テスト（）{

    if（！（LoginControllerのこのインスタンス））{
        新しいLoginController（）;を返します。
    }

        自己=これ;

        this.init（）;
    }

    Test.prototype.init = function（）{
        $（ "。login"）。click（this.login）;
    };

    Test.prototype.login = function（event）{
        event.preventDefault（）;

        self.validate（）;

        console.log（ "login"）;
    };

    Test.prototype.validate = function（）{
        console.log（ "validate"）;
    };

    new Test（）;
4

1 に答える 1

2 
Test.prototype.init = function(){
  $(".login").click(this.login);
};

ここではthis.login、イベント ハンドラーとしてアタッチしています。このようにすると、関数のthis値が jquery によって、イベントをトリガーした要素に再割り当てされます。

this実際に必要な値への参照を保持するには、次を試してください。

Test.prototype.init = function(){
  var self = this;
  $(".login").click(function (evt) {
     return self.login(evt);
  });
};

または実装するブラウザーの場合bind:

Test.prototype.init = function(){
  $(".login").click(this.login.bind(this));
};

またはjQuery.proxy、と同じことを行いbindます:

Test.prototype.init = function(){
  $(".login").click($.proxy(this.login, this));
};

デモ: http://jsbin.com/ilejiw/1/

更新: いいえ、3 番目のバリアントは正しい方法ではありません。すべてのインスタンスが同じグローバル変数Testを上書きするためです。selfそのため、 (他の何かによって上書きされていない限り)selfの最後のインスタンスを指します。Test

于 2013-01-23T11:44:39.523 に答える