关于javascript 回调函数中变量作用域的讨论_Javascript教程-查字典教程网
关于javascript 回调函数中变量作用域的讨论
关于javascript 回调函数中变量作用域的讨论
发布时间:2016-12-30 来源:查字典编辑
摘要:1、背景Javascript中的回调函数,相信大家都不陌生,最明显的例子是做Ajax请求时,提供的回调函数,实际上DOM节点的事件处理方法(...

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"><></script>

</head>

<body> <a href="javascript:void(0)">调用测试</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"><></script>

</head>

<body> <a href="javascript:void(0)">调用测试</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"><></script>

</head>

<body>

<a href="javascript:void(0)">调用测试</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教程学习
    热门Javascript教程学习
    编程开发子分类