研究一下JavaScript的函数回调机制
来源:互联网 发布:mac打开flac 编辑:程序博客网 时间:2024/05/11 20:52
研究一下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和dwr2
3、模拟问题的代码
下面的测试代码可以模拟这个问题:
<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>
在testCall方法中,我用了两种方式回调“testObj.callback"方法:
第一种方式: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
http://blog.csdn.net/jinxfei/archive/2009/06/17/4277769.aspx
回调函数(Callback Functions)
因为函数和其他数据一样可以被赋值,删除,拷贝等,所以也可以把函数作为参数传入到另一个函数中。
实例一
- function invoke_and_add(a,b){
- return a()+b();
- }
- function one(){
- return 1;
- }
- function two(){
- return 2;
- }
- invoke_and_add(one ,two);
结果为3;
再来看看匿名函数的用法。
实例二
- invoke_and_add(function(){return 1;},function(){return 2;})
我们用匿名函数替代了 one,two两个函数。
通过上面两个实例,回调函数的定义为:传递一个函数A到另一个函数B中,并且这个函数B执行函数A。我们就说函数A叫做回调函数。如果没有名称,就叫做匿名回调函数
回调函数的作用
主要有三个
1.当函数作为参数传递的时候,不用为这个函数定义一个名称,这样的好处是减少了全局变量。
2.节省了大量的代码。
3.提高了程序的性能。
http://www.javaeye.com/topic/301453
- 研究一下JavaScript的函数回调机制
- 麻雀虽小,五脏俱全:研究一下JavaScript的函数回调机制
- 研究一下JS的转型函数
- 可以研究一下的链接
- 值得研究一下的文章
- Javascript的回调机制讲解
- javascript函数解析机制
- javascript函数预处理机制
- 研究一下请客,吃饭的学问
- 研究一下Java的内存管理
- Android 深入的研究一下蓝牙
- JavaScript中函数命名机制
- 研究一下springside的核心部分源代码
- 学习Polymorphours的代码,研究一下pe文件格式
- 奇怪的EXC_BAD_ACCESS 有时间研究一下
- 看到好的资源,有时间研究一下
- 研究一下 crt0msg.c 里面的代码
- 研究一下XCode下的GCD命令
- 二叉查找树(binary search tree)上的基本操作
- C++虚函数表解析
- 24小时以后……
- 网站分析10步骤
- 中秋快乐
- 研究一下JavaScript的函数回调机制
- 在郑州的最后一个中秋
- 果敢――遗落在缅甸的华人区
- 最后100天考研复习计划
- 大连理工研究生入学考试离散数学题型统计(2002-2005)
- 大连理工研究生入学考试数据结构题型统计(2002-2005)
- 《越狱》背后的中国字幕组--ZT
- adobe.share
- 【国际象棋的下法】