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

【问题标题】：How do I reference the object from within a $.post() call如何在 $.post() 调用中引用对象
【发布时间】：2013-07-29 12:16:41
【问题描述】：

我有一个 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 请求？

【问题讨论】：

完全不使用它：this.func1(); => func1();
@SnowBlind：不，这会导致ReferenceError。上述func2 的范围内没有func1。
@T.J.Crowder 哦，你是对的..

标签： javascript jquery javascript-objects

【解决方案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');
   }
};

【讨论】：

+1 不知道为什么我没有包含该选项，这是我通常会做的（直到变量的名称！）。
有时少即是多 :-) var that = this;

【解决方案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's answer，它概括了这一点（例如，如果您将名称 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”以获得多个选项）。

【讨论】：

其实this为什么不是指给$.post的回调函数而不是$.post本身呢？因为在函数中使用var Foo function() { }; 声明对象类型时使用this 指的是函数本身。编辑我会提出这个问题。
你摇滚 T.J.！正是我正在寻找的答案
@Virus721: this 非常非常少提到函数。至于$.post，文档没有说明它在回调期间将this 设置为什么。
@FloatingRock：哈哈！很高兴这有帮助。 :-)

【解决方案3】：

使用 ajax 上下文选项：

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

【讨论】：