Question

我在使用'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函数来解决这个问题，但我想看看如何以另一种方式做到这一点。理想情况下，我想将对当前对象的引用传递给成功处理程序，但无法弄清楚如何做到这一点......

Answer 1

这是context的{{1}}选项的用途：

$.ajax

这将确保将当前（正确的）$.ajax({ // ... context: this, success: this.showItems });传递给this。

Answer 2

您正在传递函数参考。这将没有相同的背景。

...

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

使用原型模式在ajax回调中访问'this'

2 个答案: