Javascript原型混淆-正确的方法

我正在创建一个带有原型的Javascript“类”。我不明白为什么第一个/第二个块不起作用，而第三个块会起作用。对于第一个/第二个块，我得到：“Object#没有方法‘validate’”。为什么它会这样做，第三区是正确的方式吗

--编辑 我已经在Chrome/FF中对此进行了测试

--Edit2 如果我使用以下命令调用测试原型： var测试=新测试（）

并在de-login原型中调用测试变量，它将工作

块1

function Test(){ 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(); 功能测试（）{ this.init（）； } Test.prototype.init=函数（）{ $（“.login”）。单击（this.login）； }; Test.prototype.login=函数（事件）{ event.preventDefault（）； 这个。validate（）； console.log（“登录”）； }; Test.prototype.validate=函数（）{ 控制台日志（“验证”）； }; 新测试（）； 块2

function Test(){ 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(); 功能测试（）{ this.init（）； } Test.prototype.init=函数（）{ $（“.login”）。单击（this.login）； }; Test.prototype.login=函数（事件）{ var self=这个； event.preventDefault（）； self.validate（）； console.log（“登录”）； }; Test.prototype.validate=函数（）{ 控制台日志（“验证”）； }; 新测试（）； 块3

function Test(){ if(!(this instanceof LoginController)){ return new LoginController(); } self = this; 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(); 功能测试（）{ 如果（！（此实例为LoginController））{ 返回新的LoginController（）； } self=这个； this.init（）； } Test.prototype.init=函数（）{ $（“.login”）。单击（this.login）； }; Test.prototype.login=函数（事件）{ event.preventDefault（）； self.validate（）； console.log（“登录”）； }; Test.prototype.validate=函数（）{ 控制台日志（“验证”）； }; 新测试（）； 在这里，您将附加

this.login

作为事件处理程序。通过这种方式，函数将其

值由jquery重新分配给触发事件的元素

要保留对实际需要的
值的引用，请尝试：

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

或用于实现以下功能的浏览器：

或者，它执行与绑定相同的操作：

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

演示：


更新：不，第三个变量不是正确的方法，因为
测试
的每个实例都会覆盖相同的全局
self
变量。因此，
self
将指向
Test
的最后一个实例（只要它没有被其他内容覆盖）
 所有这三个块在我的javascript控制台中都能正常工作。还请注意，在块3中，您正在覆盖全局变量
self
，这绝不是一个好主意。我认为block 1是正确的方法。init函数可以调用登录名，这很有效。。。但是在登录原型函数中，我不能调用原型验证函数（chrome/FF）。这是为什么？@AnnaSmother您使用的是
self.validate（）？如果是，则将其更改为
this.validate（）。如果没有，请提供显示错误的代码示例。；）@AnnaSmother这是你的小提琴的最新版本，我在回答中写道：这是idd解决我问题的方法，没有做一次艰难的刷新：P
Test.prototype.init = function(){
  $(".login").click(this.login.bind(this));
};

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