0

我在使用“this”关键字时遇到了一些问题。我明白为什么以下内容不起作用，但不知道如何解决它......

//Namespace
var CPT = CPT || {};

//Constructor
CPT.Grid = function (hostElement, surlWeb) {
  this.hostElement = hostElement;
  this.surlWeb = surlWeb;
}

//Prototype
CPT.Grid.prototype = {

  init: function () {

    $.ajax({
      url: this.surlWeb,
      headers: { "accept": "application/json" },
      success: this.showItems
    });
  },

  showItems: function (data) {
    //do some work 

    // this is the error... no access to hostElement because 'this' is the AJAX call
    this.hostElement.html(items.join(''));
  }
}

function getProducts() {
  var grid = new CPT.Grid($("#displayDiv"), someUrl);
  grid.init();
}

我知道我可以通过没有单独的 showItems 函数来解决这个问题，但我想看看如何以另一种方式做到这一点。理想情况下，我想将对当前对象的引用传递给成功处理程序，但无法弄清楚如何做到这一点......

4

2 回答 2

5

这就是context选项的$.ajax用途：

$.ajax({
  // ...
  context: this,
  success: this.showItems
});

这将确保当前（正确）this传递给showItems.

于 2012-10-20T17:05:05.167 回答
1

您正在传递函数引用。这不会有相同的上下文。

...

var self = this;
$.ajax({
      url: this.surlWeb,
      headers: { "accept": "application/json" },
      success: function(){self.showItems.apply(self, arguments)
    });
  },

或者

您可以将上下文绑定到您的方法

this.showItems = this.showItems.bind(this); // will not work IE < 9
 $.ajax({
          url: this.surlWeb,
          headers: { "accept": "application/json" },
          success: this.showItems
        });
      },
于 2012-10-20T17:04:33.773 回答