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


Posted in Javascript onSeptember 11, 2009

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!)
Javascript 相关文章推荐
jQuery 动画基础教程
Dec 25 Javascript
在Ajax中使用Flash实现跨域数据读取的实现方法
Dec 02 Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
Feb 03 Javascript
js 自制滚动条的小例子
Mar 16 Javascript
简介JavaScript中toUpperCase()方法的使用
Jun 06 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
Jan 13 Javascript
深入理解AngularJs-scope的脏检查(一)
Jun 19 Javascript
详解React 在服务端渲染的实现
Nov 16 Javascript
vue cli使用绝对路径引用图片问题的解决
Dec 06 Javascript
基于ionic实现下拉刷新功能
May 10 Javascript
JS定时器如何实现提交成功提示功能
Jun 12 Javascript
Element InputNumber 计数器的实现示例
Aug 03 Javascript
javascript 一些用法小结
Sep 11 #Javascript
JS 日期验证正则附asp日期格式化函数
Sep 11 #Javascript
jquery 简单导航实现代码
Sep 11 #Javascript
禁止JQuery中的load方法装载IE缓存中文件的方法
Sep 11 #Javascript
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
Sep 09 #Javascript
用Javascript 和 CSS 实现脚注(Footnote)效果
Sep 09 #Javascript
Javascript 获取滚动条位置等信息的函数
Sep 08 #Javascript
You might like
php基础知识:类与对象(5) static
2006/12/13 PHP
PHP调用MySQL的存储过程的实现代码
2008/08/12 PHP
Laravel日志用法详解
2016/10/09 PHP
静态html文件执行php语句的方法(推荐)
2016/11/21 PHP
jquery tablesorter.js 支持中文表格排序改进
2009/12/09 Javascript
jQuery插件开发全解析
2012/10/10 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
2014/09/15 Javascript
jQuery自动完成插件completer附源码下载
2016/01/04 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
2016/06/14 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
2016/08/15 Javascript
详解用webpack2.0构建vue2.0超详细精简版
2017/04/05 Javascript
详解Vue-cli 创建的项目如何跨域请求
2017/05/18 Javascript
Vue动态组件实例解析
2017/08/20 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
2017/10/31 Javascript
Webpack优化配置缩小文件搜索范围
2017/12/25 Javascript
详解如何在vue项目中引入elementUI组件
2018/02/11 Javascript
jQuery实现菜单的显示和隐藏功能示例
2018/07/24 jQuery
使用Python进行稳定可靠的文件操作详解
2013/12/31 Python
Python中os.path用法分析
2015/01/15 Python
详解在Python程序中解析并修改XML内容的方法
2015/11/16 Python
Python基于QRCode实现生成二维码的方法【下载,安装,调用等】
2017/07/11 Python
Python装饰器用法实例总结
2018/05/26 Python
python 调试冷知识(小结)
2019/11/11 Python
浅谈python累加求和+奇偶数求和_break_continue
2020/02/25 Python
Python datetime 格式化 明天,昨天实例
2020/03/02 Python
Python requests HTTP验证登录实现流程
2020/11/05 Python
德国原装品牌香水、化妆品和手表网站:BRASTY.DE
2016/10/16 全球购物
梅西百货澳大利亚:Macy’s Australia
2017/07/26 全球购物
亚洲在线旅行门户网站:Expedia.com.hk(智游网)
2020/04/14 全球购物
品管员岗位职责
2013/11/10 职场文书
2014年高三毕业生自我评价
2014/01/11 职场文书
桥梁工程专业求职信
2014/04/21 职场文书
2015元旦家电促销活动策划方案
2014/12/09 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书
高三数学复习备考教学反思
2016/02/18 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书