关于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 相关文章推荐
Prototype String对象 学习
Jul 19 Javascript
js查错流程归纳
May 04 Javascript
ExtJS[Desktop]实现图标换行示例代码
Nov 17 Javascript
JavaScript中使用concat()方法拼接字符串的教程
Jun 06 Javascript
js改变html的原有内容实现方法
Oct 05 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
Jun 30 Javascript
javascript用rem来做响应式开发
Jan 13 Javascript
妙用缓存调用链实现JS方法的重载
Apr 30 Javascript
layui递归实现动态左侧菜单
Jul 26 Javascript
Vue 权限控制的两种方法(路由验证)
Aug 16 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
Jun 05 Javascript
Vue filter 过滤器、以及在table中的使用介绍
Sep 07 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
简单易用的计数器(数据库)
2006/10/09 PHP
php导入大量数据到mysql性能优化技巧
2014/12/29 PHP
PHP将页面中点击数量高的链接进行高亮显示的方法
2016/05/30 PHP
php实现当前页面点击下载文件的实例代码
2016/11/16 PHP
php中照片旋转 (orientation) 问题的正确处理
2017/02/16 PHP
PHP 二级子目录(后台目录)设置二级域名
2017/03/02 PHP
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
原生JS实现加入收藏夹的代码
2013/10/24 Javascript
JavaScript生成二维码图片小结
2015/12/27 Javascript
jQuery基于Ajax方式提交表单功能示例
2017/02/10 Javascript
nodejs前端自动化构建环境的搭建
2017/07/26 NodeJs
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
2018/03/07 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
2018/03/28 Javascript
Canvas实现微信红包照片效果
2018/08/21 Javascript
python使用urllib模块和pyquery实现阿里巴巴排名查询
2014/01/16 Python
Python使用cookielib模块操作cookie的实例教程
2016/07/12 Python
python机器学习之决策树分类详解
2017/12/20 Python
浅谈Python2获取中文文件名的编码问题
2018/01/09 Python
使用python编写udp协议的ping程序方法
2018/04/22 Python
python set集合使用方法解析
2019/11/05 Python
解决Alexnet训练模型在每个epoch中准确率和loss都会一升一降问题
2020/06/17 Python
浅谈keras.callbacks设置模型保存策略
2020/06/18 Python
css3背景图片透明叠加属性cross-fade简介及用法实例
2013/01/08 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(二)
2013/01/21 HTML / CSS
新三好学生主要事迹
2014/01/23 职场文书
消防应急演练方案
2014/02/12 职场文书
行政副总岗位职责
2014/02/23 职场文书
化妆品店促销方案
2014/02/24 职场文书
聚美优品广告词改编
2014/03/14 职场文书
企业挂职心得体会
2014/09/10 职场文书
仓管员岗位职责范本
2015/04/01 职场文书
小学大队长竞选稿
2015/11/20 职场文书
七年级英语教学反思
2016/02/15 职场文书
2016大学生国家助学贷款承诺书
2016/03/25 职场文书
pytorch 实现多个Dataloader同时训练
2021/05/29 Python