javascript - 如何在 $.post() 调用中引用对象

Question

我有一个 Javascript 对象，如下所示：

var MyObject = {
   func1 : function() {
       // Does something
   },
   func2 : function() {
       // Send an AJAX request out
       $.post('', $('form').serialize(), function(response) {
           // Call the first function
           this.func1(); // Fails - this refers to the $.post request
       }, 'json');
   }
};

我怎样才能使this引用点指向对象本身，而不是$.post请求？

Answer 1

最简单的方法：

var MyObject = {
   func1 : function() {
       // Does something
   },
   func2 : function() {
       var self = this;        //self = MyObject-object
       // Send an AJAX request out
       $.post('', $('form').serialize(), function(response) {
           // Call the first function
           self.func1(); // #### NEW ####
       }, 'json');
   }
};

Answer 2

如何在 $.post() 调用中引用对象

使用变量名：

var MyObject = {
   func1 : function() {
       // Does something
   },
   func2 : function() {
       // Send an AJAX request out
       $.post('', $('form').serialize(), function(response) {
           // Call the first function
           MyObject.func1(); // <== Using the name
       }, 'json');
   }
};

另请参阅alexP 的回答，它概括了一点（例如，如果您将名称更改为MyObject其他名称，则不必在两个地方都这样做）。

如何使 this 引用指向对象本身，而不是$.post请求？

如果你真的想要它this，你可以通过几种方式做到这一点。有 jQuery 的$.proxy：

var MyObject = {
   func1 : function() {
       // Does something
   },
   func2 : function() {
       // Send an AJAX request out
       //                  Note ---------v
       $.post('', $('form').serialize(), $.proxy(function(response) {
           // Call the first function
           this.func1(); // <== Using `this` now
       }, 'json'), MyObject);
       //        ^^^^^^^^^^----- note
   }
};

或者 ES5 的Function#bind：

var MyObject = {
   func1 : function() {
       // Does something
   },
   func2 : function() {
       // Send an AJAX request out
       $.post('', $('form').serialize(), function(response) {
           // Call the first function
           this.func1(); // <== Using `this` now
       }, 'json').bind(MyObject));
       //        ^^^^^^^^^^^^^^^----- note
   }
};

请注意，并非所有浏览器都具有 ES5 bind，尽管它是可以填充的功能之一（搜索“es5 shim”以获得多个选项）。

Answer 3

使用 ajax 上下文选项：

$.ajax({
  context:this,
  type: "POST",
  url: url,
  data: data,
  success: this.func1,
  dataType: dataType
});