javascript - 使用回调处理程序在函数内调用父对象方法

Question

我正在调用 ParentObject.doSomething()，它会依次调用 WebService 对象来执行一些 ajax 调用，并且在 ajax 调用成功时执行回调函数。但是回调函数中的任何父函数都会失败。

我认为这与范围解析有关。我找不到解决此问题的方法。

是否有更好的架构风格来模块化 ajax 服务和模型？

我还创建了一个 jsfiddle - http://jsfiddle.net/bzKXr/2/

var ParentObject =  {

     doSomething: function(){
         document.write("Inside doSomething <br />");
         var self = this;
         WebServices.firstService("some URL", self.successCallback);
     },

     changeData: function(data){
         //Manipulate data
         document.write("Inside changeData <br />");
     },

     successCallback: function(jsonData){
         document.write("Inside successCallback <br />");
         try {
             //Execution fails at this point. Possibly because of scope resolution
             this.changeData(jsonData);  
         }
         catch (error) {
             console.log(error);
             document.write(error);
         }  
     },
};

var WebServices = {
    firstService: function(url, successCallbackHandler){
        document.write("Inside firstService <br />");
        //Get data using the URL
        //on success call successCallback
        successCallbackHandler("some data");
    }
};


$(document).ready(function() {
    ParentObject.doSomething();

});
​

Answer 1

编写 self.successCallback 不会将函数绑定(bind)到 self，您必须实际调用函数作为 self。 successCallback() 以正确绑定(bind)上下文。

您可以通过将调用包装在一个保留对 self 的访问的闭包中轻松地做到这一点:

doSomething: function(){
     document.write("Inside doSomething <br />");
     var self = this;
     WebServices.firstService("some URL", function() {
        self.successCallback();
     });
 },

或者在 ES5 中，您可以使用 .bind() 来确保 successCallback 的 this 上下文始终是指定的参数:

doSomething: function(){
     document.write("Inside doSomething <br />");
     WebServices.firstService("some URL", this.successCallback.bind(this));
 },