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

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不绑定函数self,您必须实际调用函数self.successCallback()以正确绑定上下文.

您可以通过将调用包装在一个保留访问权限的闭包中来轻松完成self:

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

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

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