麻雀虽小，五脏俱全：研究一下JavaScript的函数回调机制

“麻雀虽小，五脏俱全”系列---1、背景
Javascript中的回调函数，相信大家都不陌生，最明显的例子是做Ajax请求时，提供的回调函数，
实际上DOM节点的事件处理方法（onclick,ondblclick等）也是回调函数。在使用DWR的时候，回调函数可以作为第一个或者最后一个参数出现，如：
function callBack(result){
}
myDwrService.doSomething(param1,param2,callBack);//DWR的推荐方式
//或者
myDwrService.doSomething(callBack,param1,param2);
2、问题描述
最近在使用Dojo+Dwr的时候，碰到一个问题：
如果回调函数是属于某个对象（记为obj1）的方法，等到DWR执行该回调函数的时候，
上下文却不是obj1。
表现的现象就是在回调函数中访问obj1的任何属性都是undefined。版本：Dojo1.3.1和dwr23、模拟问题的代码
下面的测试代码可以模拟这个问题：
<html>
<head>
<script>    
    var context="全局";
    var testObj={        
        context:"初始",
        callback:function (str){//回调函数
            alert("callback:我所处的上下文中，context="+this.context+"，我被回调的方式："+str);
        }        
    };//创建一个对象，作为测试回调函数的上下文
    testObj.context="已设置";
    
    function testCall(){                
        callMethod(testObj.callback);
        callObjMethod(testObj,testObj.callback);        
    }  
    function callObjMethod(obj,method){        
        method.call(obj,"指定显式对象上下文回调");
    }
    function callMethod(method){
        method("通过默认上下文回调");
    }
</script>
</head>
<body>
<a href="javascript:void(0)" onclick="testCall()">调用测试</a>
</body>
</html>在callObjMethod方法中，我用了两种方式回调“method"方法：
第一种方式：method("通过默认上下文回调");
没有指定上下文，我们发现回调函数内部访问context的值是全局变量的值，
这说明，执行该方法的默认上下文是全局上下文。第二种方式：method.call(obj,"指定显式对象上下文回调");
指定obj为method执行的上下文，就能够访问到对象内部的context。
4、研究DWR
因为06年使用DOJO+DWR(1.0)的时候，已经遇到过这个问题，当时没做太多功课，直接改了dwr的源代码。现在用dwr2，于是想先看看DWR是不是对这个问题有新的处理方式，
将dwr.jar中的engine.js拿出来，查看了有关回调的相关代码（_remoteHandleCallback和_execute)，
发现对回调的处理方式似乎比1.0更简单，没办法将对象和方法一起传过去。5、做进一步的研究
因为这次DWR在项目中的使用太广泛，而且我相信这样的需求应该是可以满足的，于是没有立刻修改源码，首先，在Google上搜Dojo+dwr，没有查到什么结论，可能Dojo的用户不是太多。于是又搜”javascript callback object context“，得到一篇文章专门介绍java回调函数的问题：
http://bitstructures.com/2007/11/javascript-method-callbacks
最重要的一句话：
When a function is called as a method on an object (obj.alertVal()), 
"this" is bound to the object that it is called on (obj). 
And when a function is called without an object (func()), 
"this" is bound to the JavaScript global object (window in web browsers.) 这篇文章也提供了解决方案，就是使用Closure和匿名方法，
在javascript中，在function内部创建一个function的时候，会自动创建一个closure，
而这个closure就能记住对应的function创建时的上下文。所以，如果这样：
var closureFunc=function(){
    testObj.callback();
}
那么无论在什么地方，直接调用closureFunc()和调用testObj.callback()是等价的。详情参见上面提到的文章：http://bitstructures.com/2007/11/javascript-method-callbacks。6、改进模拟代码
模拟代码只，我们再增加一种回调方式：
<html>
<head>
<script>    
    var context="全局";
    var testObj={        
        context:"初始",
        callback:function (str){//回调函数
            alert("callback:我所处的上下文中，context="+this.context+"，我被回调的方式："+str);
        }        
    };//创建一个对象，作为测试回调函数的上下文
    testObj.context="已设置";
    
    function testCall(){                
        callMethod(testObj.callback);
        callWithClosure(function(param){testObj.callback(param);});
        callObjMethod(testObj,testObj.callback);        
    }  
    function callObjMethod(obj,method){        
        method.call(obj,"指定显式对象上下文回调");
    }
    function callMethod(method){        
        method("通过默认上下文回调");        
    }
    function callWithClosure(method){        
        method("通过Closure保持上下文回调");        
    }
</script>
</head>
<body>
<a href="javascript:void(0)" onclick="testCall()">调用测试</a>
</body>
</html>测试以上代码，我们可以发现，通过Closure和通过显示指定对象得到的效果一致。7、模拟更加真实的调用情景
但是以上代码还有一个问题，通常在真实环境中，如果回调函数是对象中方法，那么发起请求的方法也处在同一个对象，
在javascript中，this也可以代表当前对象，但不能直接用在匿名function中用，比如：
var testObj={        
    context:"初始",
    callback:function (str){//回调函数
        alert("callback:我所处的上下文中，context="+this.context+"，我被回调的方式："+str);
    },
    caller:function(){
        callWithClosure(function(param){this.callback(param);});
    }
};//创建一个对象，作为测试回调函数的上下文以上代码中的this指的不是testObj，而是全局上下文，
需要在closure外写一个临时变量来代表this，完整的代码如下：
<html>
<head>
<script>    
    var context="全局";
    var testObj={        
        context:"初始",
        callback:function (str){//回调函数
            alert("callback:我所处的上下文中，context="+this.context+"，我被回调的方式："+str);
        },
        caller:function(){            
            callWithClosure(function(param){this.callback(param);});
            var temp=this;
            callWithClosure(function(param){temp.callback(param);});            
        }  
    };//创建一个对象，作为测试回调函数的上下文
    testObj.context="已设置";
    
    function testCall(){                    
        callMethod(testObj.callback);
        testObj.caller();
        callWithClosure(function(param){testObj.callback(param);});
        callObjMethod(testObj,testObj.callback);        
    }  
    function callObjMethod(obj,method){        
        method.call(obj,"指定显式对象上下文回调");
    }
    function callMethod(method){        
        method("通过默认上下文回调");        
    }
    function callWithClosure(method){        
        method("通过Closure保持上下文回调");        
    }
    
    function callback(str){
        alert("callback:我是定义在外部的全局函数。");
    }
</script>
</head>
<body>
<a href="javascript:void(0)" onclick="testCall()">调用测试</a>
</body>
</html>
        
8、什么是Closure
Two one sentence summaries: 
a closure is the local variables for a function - kept alive after the function has returned, 
or 
a closure is a stack-frame which is not deallocated when the function returns. (as if a 'stack-frame' were malloc'ed instead of being on the stack!) 详情参见：http://blog.morrisjohns.com/javascript_closures_for_dummies

解决方案 »

  1.   

    var testObj={
            that:this,
            context:"初始",
            callback:function (str){//回调函数
                alert("callback:我所处的上下文中，context="+that.context+"，我被回调的方式："+str);
            }        
        };这样可以吗？没测试过
      

  2.   

    又是jinxfei的好文，顶！
    学习～
      

  3.   


    刚才上班的时候没有仔细看，回复的有些鲁莽。你这样的话，必须用this.that来引用，而且解决不了上下文的问题，
    当this==全局上下文的时候，this.that.context还会报错。
      

  4.   

    JS很强大！可惜我不精通！加油！学好JS
      

  5.   

    理解JavaScript作用域及作用域链，原型及原型链，这些问题便可看得很清楚！ ^_^
      

  6.   

    JavaScript 中的 this 对象是可变的，随着绑定对象的不同而发生变化，不像 Java 中的 this 是不可变对象。var me = this; 这种方式在闭包函数中很常用，借由一个变量来引用当前的对象，在闭包中仍然可以获得上一上下文中的 this 对象，
    而不是闭包执行时的上下文对象。
      

  7.   

    顶！~~~~~~~~~~~~刚好最近想看看Dojo是啥东西。
      

  8.   

    http://www.baidu.com
      

  9.   

    Java 中的 this 是不可变的？？
      

  10.   

    这中方式在jquery中用的比较多
      

  11.   

    看来我的JQuery也要在学习下了，  楼主太专业了