Question

我是一个只学习JavaScript的C ++人，所以'this'绑定到调用对象的事实仍然令人惊讶。我想使用一个对象方法作为事件监听器，并希望确保我使用JavaScript专业人员的所有风格。

所以，为了让方法让它的对象'this'，以便我可以在适当的上下文中访问它的属性，我写了以下内容：

var user =
{
    status: 1,      // login status: 0:invalid password, 1:logged out, 2:logged in
loginName: "",

// Method called whenever the user submits a username/password via html form:
onLoginSubmit: function (event)
{
        if (this != user)   // called from 'form submit' callback, so call ourselves:
    {
        user.onLoginSubmit(event);
        return;
    }
}
};

我在这里找到了一个先前的答案：Accessing an object's property from an event listener call in Javascript，但建议的解决方案是基本上创建一个全局。是否有比以前的解决方案或我的递归解决方案更酷，更专业的方式来获得'这个'？

Answer 1

我假设当你绑定提交处理程序时，你正在做这样的事情：

form.submit(user.onLoginSubmit);

虽然你有什么工作，但最好的方法是绑定提交处理程序，以便它实际上使用正确的'this'调用onLoginSubmit，这样你在提交处理程序中不需要任何额外的逻辑

如果在绑定函数时执行类似的操作，那么它应该可以正常工作。

form.submit(function(e) {
  user.onLoginSubmit(e);
});

通过使用匿名函数，您仍然可以正确调用用户对象的方法。

如果我误解了您的问题，请发布一些关于您如何调用onLoginSubmit（）的代码。

Answer 2

你可以使用闭包，这应该有效：

function User() {

  var that = this;
  this.status = 1;
  this.loginName = "";
  this.onLoginSubmit = function (event)
  {
     // the variable "that" is available and references the User instance
  }
}
var user = new User();

这里我们使用User作为构造函数，因此这指向通过“new”构造的对象。（粗略地）发生的事情是“that”变量是User函数的本地变量，但是由于函数引用它，它会保留在内存中并且可用于此函数。然后，您可以使用“that”而不是“this”作为“假”范围。

如果你有很多User实例，那么这不是你想要使用的东西，因为为每个实例创建了函数。 “常规”方式是使用像Logan的答案中的匿名函数。

大多数（如果不是全部）框架都有优雅的方法来处理这个问题，但基本上你需要通过闭包在函数本身中提供作用域，或者在调用函数时知道它，这样你就可以用正确的方法做到这一点。范围（通过编写user.onLoginSubmit（））

希望这有点明确：）

编辑：哦，有人在您链接的帖子中发布了同样的内容。那么现在你已经为'用户'定制了它！

Answer 3

聚会可能有点晚了，但我会把它留给任何感兴趣的人...

我真的不喜欢事件如何改变上下文，事件中已经有一个目标对象可以引用，所以我不知道为什么会这样？

我像这样添加监听器，所以它不会发生：

addEventListener('click', (event)=>{handle(event)});
-OR-
addEventListener('click', function(event){handle(event)}); //No lamda

这样处理函数的上下文保持不变，并且事件对象仍然通过。您可以在事件中引用目标以获取最初的“this”。请记住，“this”现在将是匿名函数在其下调用的上下文……如果在类、构造函数或方法中调用，则它应该是您的实例。

使用对象方法作为事件侦听器

3 个答案: