Question

我在JS中有一个类，里面包含一系列方法，与登录和用户的注册相关。这些方法基本上可以捕获页面的事件，并且可以执行某些操作。

当它为UsersOperations（）创建实例时，它被调用（由于点击事件）$("#login").click(function(){});，正确执行...直到调用saveUserInfo();之前，在这一点上，页面是重装，我不知道为什么，我不明白，我有相同的方法，但没有上课，一切都工作正常。

请帮助我，否则，我会因这个存在问题而死。

$(document).ready(function(){
  new UserOperations();
});

  class UserOperations{
    constructor() {
      if(!this.checkUserWithLogin())
        this.addLoginAndRegisterButtons();
      var self = this;
      $("#Log_In").click(function(){
        $.ajax({
          type: "GET",
          url: "php/request.php",
          async: true,
          data: {nick_log:$("#username").val(),
                  pass_log:$("#userpass").val()},
          success: function(data){
          var dataJson = JSON.parse(data);

          if(dataJson==null)
            alert("You are not registered");
          else {
            if($("#Keep_log").is(':checked')) 
              self.saveUserInfo(dataJson,"localStorage"); 

            else 
              self.saveUserInfo(dataJson,"sessionStorage"); 
            self.checkUserWithLogin();
          },
          error: function (obj, error, objError){
            alert("There is an error!");
          }
        });
      });
   }
}

Answer 1

因为this不再引用该对象，所以它无法找到该功能。您作为回调附加的功能不会关闭this。您可以使用另一个变量，如var self = this;，也可以使用Function.prototype.bind（）绑定回调。

这里有一些示例代码可以使答案更加完整，显示三种不同的机制来保存上下文。这些方法的根本需求是，在创建回调函数时，我们不会自动保留定义回调函数的方法中存在的this的值。我们需要一些机制来在适当的对象上执行函数：

function Cat(name) {
    this.name = name;

    // Note we don't need anything special when we're immediately executing:
    console.log("Immediate execution with this:");
    this.speak();

    // Option 1. Explicitly specify the value of 'this' inside the callback using bind()
    setTimeout(function () {
        console.log("Callback execution with bind:");
        this.speak();
    }.bind(this), 1000);

    // Option 2. Copy 'this' into a local variable which is then captured in a closure
    var self = this;
    setTimeout(function () {
        console.log("Callback execution with closure variable:");
        self.speak();
    }, 2000);

    // Option 3. (ES6) Use a lambda/arrow function which does preserve the value of 'this' from the context in which it was defined
    setTimeout(() => {
        console.log("Lambda preserves the value of this:");
        this.speak();
    }, 3000);

}

Cat.prototype.speak = function () {
    console.log(this.name + " says meow!");
}

为什么程序不调用js类函数？

1 个答案: