Question

我正在创建一个JavaScript类。一些方法包含使用JQuery的AJAX调用。我遇到的问题是，由于范围的变化，我无法在AJAX回调中使用this关键字。我想出了一个hackey解决方案，但我想知道最好的做法是什么？

以下是一个例子：

var someClass = function() {

   var someElement = $('form');

   this.close = function() {
      someElement.remove();
   };

   this.query = function() {
      $.ajax({
         url: someurl,
         success: function() {
            this.close(); // does not work because `this` is no longer the parent class
         }
      });
   };
};

Answer 1

只需使用context参数将您想要的任何对象传递给成功回调：

$.ajax({
    url: someurl,
    context: this,
    success: function() {
        this.close(); // this is what it was when we triggered the AJAX call
    }
});

你也可以传递复杂的对象和东西：

$.ajax({
    url: someurl,
    context: { foo: 'bar', element: this },
    success: function() {
        alert(this.foo);
        this.element.close();
    }
});

Answer 2

存储对this的引用 - 我的约定是使用self。

var someClass = function() {

   var self = this, //<--- store a reference
       someElement = $('form');

   this.close = function() {
      someElement.remove();
   };

   this.query = function() {
      $.ajax({
         url: someurl,
         success: function() {
            self.close(); // does not work because `this` is no longer the parent class
         }
      });
   };
};

Answer 3

我更喜欢使用匿名函数，因为你获得了局部变量，而且你不必使用var来创建变量，我在一段代码中间发现它很笨拙。

var someClass = function() {

   var someElement = $('form');

   this.close = function() {
      someElement.remove();
   };

   this.query = function() {
      (function(self, someurl){
          $.ajax({
              url: someurl,
              success: function() {
                 self.close();
              }
          });
      }(this, someurl));
   };
};

在此示例中，没有必要将someurl作为参数包含在内，但是，当您想要创建可在等待响应时更改值的全局变量的本地副本时，它会派上用场。

在方法中的ajax调用中使用`this`关键字的解决方案？

3 个答案: