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's answer，其中概括了一点（例如，如果您将名称MyObject更改为其他名称，则无需在两个位置执行此操作。）

如何将此参考点指向对象本身，而不是$.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
});

如何在$ .post（）调用中引用该对象

3 个答案: