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

我正在创建一个JavaScript类。一些方法包含使用JQuery的AJAX调用。我所面临的问题是，由于范围的变化，我无法在AJAX回调中使用this关键字。我已经提出了一个hackey解决方案，但是我想知道最佳实践方法是什么？在方法内使用`this`关键字在Ajax调用的解决方案？

下面是一个例子：

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

来源

2011-11-17 dqhendricks

这个问题经常被问到，但由于标题非常不同，所以很难找到可比较的副本。 –

在定义'this.query（）'之前设置'var that = this;'并在里面使用'that'而不是'this'。 –

@Michael他们需要有一个更好的方式来将类似的问题链接在一起，而不是标记为重复。 – puk

只需使用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(); 
    } 
});

来源

2011-11-17 17:49:29

sofar我喜欢这一个最好的。没有意识到上下文参数。谢谢！ – dqhendricks

商店参考，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 
     } 
     }); 
    }; 
};

来源

2011-11-17 17:48:57

我更喜欢使用匿名函数，因为你得到局部变量，并且你不需要使用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作为参数，但是，当你想在等待回应这将改变值的全局变量的本地副本就派上用场了。

来源

2011-11-17 19:01:33 puk

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

回答

相关问题