首頁 > 開發者 > JavaScript
關於回呼函數中變數範圍的討論（精）
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><br /><head><br /><mce:script type="text/javascript"><!--<br />var context="全域";<br />var testObj={<br />context:"初始",<br />callback:function (str){<br />//回呼函數<br />alert("callback:我所處的上下文中，context="+this.context+"，我被回調的方式："+str);<br />}<br />};</p><p>//建立一個對象，作為測試回呼函數的上下文<br />testObj.context="已設定";<br />function testCall(){<br />callMethod(testObj.callback);<br />callObjMethod(testObj,testObj.callback);<br />}</p><p>function callMethod(method){<br />method("通過預設上下文回調");<br />}</p><p>function callObjMethod(obj,method){<br />method.call(obj,"指定顯式物件內容回調");<br />}<br />// --></mce:script><br /></head><br /><body> <a href="javascript:void(0)" mce_href="javascript:void(0)" onclick="testCall()">調用測試</a> </body><br /></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><br /><head><br /><mce:script type="text/javascript"><!--</p><p>var context="全域";<br />var testObj={<br />context:"初始",<br />callback:function (str){<br />//回呼函數<br />alert("callback:我所處的上下文中，context="+this.context+"，我被回調的方式："+str);<br />}<br />};<br />//建立一個對象，作為測試回呼函數的上下文<br />function testCall(){<br />callMethod(testObj.callback);<br />callWithClosure(function(param){testObj.callback(param);});<br />testObj.context="已設定";<br />callObjMethod(testObj,testObj.callback);<br />}<br />function callMethod(method){ method("通過預設上下文回調"); }<br />function callWithClosure(method){ method("通過Closure保持上下文回調"); }<br />function callObjMethod(obj,method){ method.call(obj,"指定顯式物件內容回調"); }<br />// --></mce:script><br /></head><br /><body> <a href="javascript:void(0)" mce_href="javascript:void(0)" onclick="testCall()">調用測試</a> </body><br /></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> var context="全域"; var testObj={ context:"初始", callback:function (st<html><br /><head><br /><mce:script type="text/javascript"><!--</p><p>var context="全域";<br />var testObj={<br />context:"初始",<br />callback:function (str){<br />//回呼函數<br />alert("callback:我所處的上下文中，context="+this.context+"，我被回調的方式："+str);<br />},<br />caller:function(){<br />callWithClosure(function(param){this.callback(param);});<br />var temp=this;<br />callWithClosure(function(param){temp.callback(param);});<br />}<br />};</p><p>//建立一個對象，作為測試回呼函數的上下文<br />testObj.context="已設定";<br />function testCall(){<br />//callMethod(testObj.callback);<br />testObj.caller();<br />//callWithClosure(function(param){testObj.callback(param);});<br />//callObjMethod(testObj,testObj.callback);<br />} </p><p>function callObjMethod(obj,method){method.call(obj,"指定顯式物件內容回調"); }<br />function callMethod(method){ method("通過預設上下文回調"); }<br />function callWithClosure(method){ method("通過Closure保持上下文回調"); }<br />function callback(str){ alert("callback:我是定義在外部的全域函數。"); }<br />// --></mce:script><br /></head><br /><body><br /><a href="javascript:void(0)" mce_href="javascript:void(0)" onclick="testCall()">調用測試</a><br /></body><br /></html><br />
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!)
詳情參見：http://blog.morrisjohns.com/javascript_closures_for_dummies
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
