Javascript 我如何访问声明的函数，即发出JSON请求的jQuery插件的done（）范围？

我试图通过保持我使用的各种功能简短且相对容易测试，来保持我正在开发的jquery插件的可配置性和可维护性

为此，我使用了一些jQuery插件代码，基于，有一个插件，我可以在其中传递覆盖，并从一系列小函数组成现有函数

但是，我在如何访问延迟的

done（）

回调中声明的函数时遇到了一些问题，而没有再次声明

done（）

函数调用中的所有函数代码

当使用基于原型的方法（如样板文件中所述）时，是否有一种推荐的模式使这些功能可用

(function($, window, document, undefined) {

  var pluginName = 'myModule';

  function myModule(element, options) {
    this.element = element;

    //  allow override of defaults
    this.options = $.extend({}, defaults, options);

    this._defaults = defaults;
    this._name = pluginName;

    // calling the init() function defined below
    this.init();
  }

  myModule.prototype = {

    init: function() {
      // add listeners for clicks on the element, and trigger some 
      // behaviour defined in fetchScore()
      $(this.element).click(function() {
        that.fetchScore();
        return false;
      });

    },
    handySuccessFunction: function() {
      // some handy DOM manipulation stuff,
      // kept out the main fetchScore function,
      // ideally to make it more testable and readable
    },
    handyFailingFunction: function() {
      // same again for failing case
    },

    fetchScore: function(authToken) {

      $.getJSON(this.options.endpoint, {
        apiKey: this.options.apiKey,
        otherParam: this.options.otherParam,
        token: authToken
      })
        .done(function(json) {
        // I want to call the handySuccessFunction() here,
        // but I have no access to myModule
      })
        .fail(function(jqxhr, textStatus, error) {
        // Likewise I want to call the handyFailingFunction() here
      });
    }
  }

  // A really lightweight plugin wrapper around the constructor,
  // preventing against multiple instantiations. 
  // We store a reference to the 
  $.fn[pluginName] = function(options) {
    return this.each(function() {
      if (!$.data(this, "plugin_" + pluginName)) {
        $.data(this, "plugin_" + pluginName,
          new pluginName(this, options));
      }
    });
  }

})(jQuery, window, document);

以下是我的预期用法：

jQuery(document).ready(function($) {
  // console.log('clicking the popup');

  $('#elementToAttachTo').myModule();

  // clicking on this to trigger the fetchScore
  // behaviour in myModule
  $('#elementToAttachTo').click();

})

您应该在“done”中使用“bind”到回调函数，将它的上下文（“this”）设置为myModule实例，在该实例中声明该函数

有几种方法

您可以使用navctive Function.prototype.bind（）方法，它在现代浏览器中工作

您可以使用jQuery$.proxy函数

所以

---

由于对

Function.prototype.bind

的支持仍然有点粗略，因此在

fetchScore

的开头将

这个

分配给一个常规的词法范围变量可能更容易。我强烈猜测这是一个反模式。它破坏了代码的结构，并可能导致内存泄漏。我更喜欢绑定“this”。将

this

绑定到词法变量与将函数绑定到同一个值对垃圾收集的影响完全相同。但是每个人（包括我）都对这类事情有自己的宗教信仰，我不想引出这个特殊的论点，所以好吧。

 myModule.prototype.fetchScore = function(authToken) {
    $.getJSON(this.options.endpoint, {
      apiKey: this.options.apiKey,
      otherParam: this.options.otherParam,
      token: authToken
    })
    .done(function(json) {
        this.handySuccessFunction();
    }.bind(this))
    .fail($.proxy(function(json) {
        this.handyFailingFunction();
    }, this))
    ;        
 };