關(guān)于javascript 回調(diào)函數(shù)中變量作用域的討論

2019-11-21 01:09:25

字體：大中小

供稿：網(wǎng)友

1、背景
Javascript中的回調(diào)函數(shù)，相信大家都不陌生，最明顯的例子是做Ajax請求時(shí)，提供的回調(diào)函數(shù)，
實(shí)際上DOM節(jié)點(diǎn)的事件處理方法（onclick,ondblclick等）也是回調(diào)函數(shù)。
在使用DWR的時(shí)候，回調(diào)函數(shù)可以作為第一個(gè)或者最后一個(gè)參數(shù)出現(xiàn)，如：
JScript code function callBack(result){ } myDwrService.doSomething(param1,param2,callBack);//DWR的推薦方式 //或者 myDwrService.doSomething(callBack,param1,param2);

2、問題描述
最近在使用Dojo+Dwr的時(shí)候，碰到一個(gè)問題：
如果回調(diào)函數(shù)是屬于某個(gè)對象（記為obj1）的方法，等到DWR執(zhí)行該回調(diào)函數(shù)的時(shí)候，
上下文卻不是obj1。
表現(xiàn)的現(xiàn)象就是在回調(diào)函數(shù)中訪問obj1的任何屬性都是undefined。
版本：Dojo1.3.1和dwr2
3、模擬問題的代碼
下面的測試代碼可以模擬這個(gè)問題：
JScript code

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<script type="text/javascript"><!-- 
    var context="全局"; 
    var testObj={ 
        context:"初始", 
        callback:function (str){ 
            //回調(diào)函數(shù) 
            alert("callback:我所處的上下文中，context="+this.context+"，我被回調(diào)的方式："+str); 
        } 
    }; 
    //創(chuàng)建一個(gè)對象，作為測試回調(diào)函數(shù)的上下文 
    testObj.context="已設(shè)置"; 
    function testCall(){ 
        callMethod(testObj.callback); 
        callObjMethod(testObj,testObj.callback); 
    } 
    function callMethod(method){ 
        method("通過默認(rèn)上下文回調(diào)"); 
    } 
    function callObjMethod(obj,method){ 
        method.call(obj,"指定顯式對象上下文回調(diào)"); 
    } 
// --></script> 
</head> 
<body> <a href="javascript:void(0)" onclick="testCall()">調(diào)用測試</a> </body> 
</html> 

在callObjMethod方法中，我用了兩種方式回調(diào)“method"方法：
第一種方式：method("通過默認(rèn)上下文回調(diào)");
沒有指定上下文，我們發(fā)現(xiàn)回調(diào)函數(shù)內(nèi)部訪問context的值是全局變量的值，
這說明，執(zhí)行該方法的默認(rèn)上下文是全局上下文。
第二種方式：method.call(obj,"指定顯式對象上下文回調(diào)");
指定obj為method執(zhí)行的上下文，就能夠訪問到對象內(nèi)部的context。

4、研究DWR
因?yàn)?6年使用DOJO+DWR(1.0)的時(shí)候，已經(jīng)遇到過這個(gè)問題，當(dāng)時(shí)沒做太多功課，直接改了dwr的源代碼。
現(xiàn)在用dwr2，于是想先看看DWR是不是對這個(gè)問題有新的處理方式，
將dwr.jar中的engine.js拿出來，查看了有關(guān)回調(diào)的相關(guān)代碼（_remoteHandleCallback和_execute)，
發(fā)現(xiàn)對回調(diào)的處理方式似乎比1.0更簡單，沒辦法將對象和方法一起傳過去。
5、做進(jìn)一步的研究
因?yàn)檫@次DWR在項(xiàng)目中的使用太廣泛，而且我相信這樣的需求應(yīng)該是可以滿足的，于是沒有立刻修改源碼，
首先，在Google上搜Dojo+dwr，沒有查到什么結(jié)論，可能Dojo的用戶不是太多。
于是又搜”javascript callback object context“，得到一篇文章專門介紹java回調(diào)函數(shù)的問題：
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內(nèi)部創(chuàng)建一個(gè)function的時(shí)候，會自動創(chuàng)建一個(gè)closure，
而這個(gè)closure就能記住對應(yīng)的function創(chuàng)建時(shí)的上下文。
所以，如果這樣：
JScript code var closureFunc=function(){ testObj.callback(); }
那么無論在什么地方，直接調(diào)用closureFunc()和調(diào)用testObj.callback()是等價(jià)的。
詳情參見上面提到的文章：http://bitstructures.com/2007/11/javascript-method-callbacks。
6、改進(jìn)模擬代碼
模擬代碼只，我們再增加一種回調(diào)方式：
JScript code

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<script type="text/javascript"><!-- 
    var context="全局"; 
    var testObj={ 
    context:"初始", 
    callback:function (str){ 
        //回調(diào)函數(shù) 
        alert("callback:我所處的上下文中，context="+this.context+"，我被回調(diào)的方式："+str); 
        } 
    }; 
    //創(chuàng)建一個(gè)對象，作為測試回調(diào)函數(shù)的上下文 
    function testCall(){ 
        callMethod(testObj.callback); 
        callWithClosure(function(param){testObj.callback(param);}); 
        testObj.context="已設(shè)置"; 
        callObjMethod(testObj,testObj.callback); 
    } 
    function callMethod(method){ method("通過默認(rèn)上下文回調(diào)"); } 
    function callWithClosure(method){ method("通過Closure保持上下文回調(diào)"); } 
    function callObjMethod(obj,method){ method.call(obj,"指定顯式對象上下文回調(diào)"); } 
// --></script> 
</head> 
<body> <a href="javascript:void(0)" onclick="testCall()">調(diào)用測試</a> </body> 
</html> 

測試以上代碼，我們可以發(fā)現(xiàn)，通過Closure和通過顯示指定對象得到的效果一致。
7、模擬更加真實(shí)的調(diào)用情景
但是以上代碼還有一個(gè)問題，通常在真實(shí)環(huán)境中，如果回調(diào)函數(shù)是對象中方法，那么發(fā)起請求的方法也處在同一個(gè)對象，
在javascript中，this也可以代表當(dāng)前對象，但不能直接用在匿名function中用，比如：
JScript code var testObj={ context:"初始", callback:function (str){//回調(diào)函數(shù) alert("callback:我所處的上下文中，context="+this.context+"，我被回調(diào)的方式："+str); }, caller:function(){ callWithClosure(function(param){this.callback(param);}); } };//創(chuàng)建一個(gè)對象，作為測試回調(diào)函數(shù)的上下文
以上代碼中的this指的不是testObj，而是全局上下文，
需要在closure外寫一個(gè)臨時(shí)變量來代表this，完整的代碼如下：
JScript code

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<script type="text/javascript"><!-- 
var context="全局"; 
var testObj={ 
    context:"初始", 
    callback:function (str){ 
        //回調(diào)函數(shù) 
        alert("callback:我所處的上下文中，context="+this.context+"，我被回調(diào)的方式："+str); 
    }, 
    caller:function(){ 
        callWithClosure(function(param){this.callback(param);}); 
        var temp=this; 
        callWithClosure(function(param){temp.callback(param);}); 
    } 
}; 
//創(chuàng)建一個(gè)對象，作為測試回調(diào)函數(shù)的上下文 
testObj.context="已設(shè)置"; 
function testCall(){ 
    //callMethod(testObj.callback); 
    testObj.caller(); 
    //callWithClosure(function(param){testObj.callback(param);}); 
    //callObjMethod(testObj,testObj.callback); 
} 

function callObjMethod(obj,method){method.call(obj,"指定顯式對象上下文回調(diào)"); } 
function callMethod(method){ method("通過默認(rèn)上下文回調(diào)"); } 
function callWithClosure(method){ method("通過Closure保持上下文回調(diào)"); } 
function callback(str){ alert("callback:我是定義在外部的全局函數(shù)。"); } 
// --></script> 
</head> 
<body> 
<a href="javascript:void(0)" onclick="testCall()">調(diào)用測試</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!)

上一篇：一個(gè)簡單的JavaScript 日期計(jì)算算法

下一篇：用DIV完美模擬createPopup 彈出窗口(武林網(wǎng)修正版)，支持Firefox,ie,chrome