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

Javascript
JavaScript 语言精粹学习笔记
有关div页面拖动、缩放、关闭、遮罩效果代码
JQuery this 和 $(this) 的区别
JS 时间显示效果代码
jquery 表单进行客户端验证demo
JS 获取span标签中的值的代码 支持ie与firefox
JavaScript 获取用户客户端操作系统版本
可以读取EXCEL文件的js代码
JS去除字符串的空格增强版(可以去除中间的空格)
监控用户是否关闭浏览器的js代码
javascript 继承实现方法
JSON 入门指南 想了解json的朋友可以看下
javascript 函数调用规则
动态表格Table类的实现
JSON 客户端和服务器端的格式转换
jQuery ui1.7 dialog只能弹出一次问题
javascript 遍历验证所有文本框的值
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
javascript 简练的几个函数
csdn 博客中实现运行代码功能实现

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 318 ::
收藏到网摘: 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!)