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

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!");
}