当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 关于javascript 回调函数中变量作用域的讨论

Javascript
jQuery中isFunction方法的BUG修复
将函数的实际参数转换成数组的方法
javascript 删除数组中重复项(uniq)
js 巧妙去除数组中的重复项
javascript下一种表单元素获取方法存在的问题
javascript 三种数组复制方法的性能对比
js 多层叠的TAB选项卡
javascript 自动标记来自搜索结果页的关键字
起点页面传值js,有空研究学习下
javascript 的Document属性和方法集合
JavaScript 使用简略语法创建对象的代码
使用JQuery进行跨域请求
jquery 经典动画菜单效果代码
jquery 常用操作方法
js提示信息jtip封装代码,可以是图片或文章
javascript面向对象的方式实现的弹出层效果代码
jquery中的sortable排序之后的保存状态的解决方法
js或css实现滚动广告的几种方案
使用JavaScript库还是自己写代码?
js 右键菜单,支持不同对象不同菜单(兼容IE、Firefox)

Javascript 中的 关于javascript 回调函数中变量作用域的讨论


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 242 ::
收藏到网摘: n/a

关于回调函数中变量作用域的讨论精品推荐,大家可以参考下。 1、背景
Javascript中的回调函数,相信大家都不陌生,最明显的例子是做Ajax请求时,提供的回调函数,
实际上DOM节点的事件处理方法(onclick,ondblclick等)也是回调函数。
在使用DWR的时候,回调函数可以作为第一个或者最后一个参数出现,如:
JScript code 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、模拟问题的代码
下面的测试代码可以模拟这个问题:
JScript code
复制代码 代码如下:

<html>
<head>
<script type="text/javascript"><!--
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 callMethod(method){
method("通过默认上下文回调");
}
function callObjMethod(obj,method){
method.call(obj,"指定显式对象上下文回调");
}
// --></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创建时的上下文。
所以,如果这样:
JScript code var closureFunc=function(){ testObj.callback(); }
那么无论在什么地方,直接调用closureFunc()和调用testObj.callback()是等价的。
详情参见上面提到的文章:http://bitstructures.com/2007/11/javascript-method-callbacks。
6、改进模拟代码
模拟代码只,我们再增加一种回调方式:
JScript code
复制代码 代码如下:

<html>
<head>
<script type="text/javascript"><!--
var context="全局";
var testObj={
context:"初始",
callback:function (str){
//回调函数
alert("callback:我所处的上下文中,context="+this.context+",我被回调的方式:"+str);
}
};
//创建一个对象,作为测试回调函数的上下文
function testCall(){
callMethod(testObj.callback);
callWithClosure(function(param){testObj.callback(param);});
testObj.context="已设置";
callObjMethod(testObj,testObj.callback);
}
function callMethod(method){ method("通过默认上下文回调"); }
function callWithClosure(method){ method("通过Closure保持上下文回调"); }
function callObjMethod(obj,method){ method.call(obj,"指定显式对象上下文回调"); }
// --></script>
</head>
<body> <a href="javascript:void(0)" onclick="testCall()">调用测试</a> </body>
</html>

测试以上代码,我们可以发现,通过Closure和通过显示指定对象得到的效果一致。
7、模拟更加真实的调用情景
但是以上代码还有一个问题,通常在真实环境中,如果回调函数是对象中方法,那么发起请求的方法也处在同一个对象,
在javascript中,this也可以代表当前对象,但不能直接用在匿名function中用,比如:
JScript code var testObj={ context:"初始", callback:function (str){//回调函数 alert("callback:我所处的上下文中,context="+this.context+",我被回调的方式:"+str); }, caller:function(){ callWithClosure(function(param){this.callback(param);}); } };//创建一个对象,作为测试回调函数的上下文
以上代码中的this指的不是testObj,而是全局上下文,
需要在closure外写一个临时变量来代表this,完整的代码如下:
JScript code
复制代码 代码如下:

<html>
<head>
<script type="text/javascript"><!--
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!)