關(guān)于javascript 回調(diào)函數(shù)中變量作用域的討論
更新時(shí)間:2009年09月11日 20:54:02 作者:
關(guān)于回調(diào)函數(shù)中變量作用域的討論精品推薦,大家可以參考下。
1、背景
Javascript中的回調(diào)函數(shù),相信大家都不陌生,最明顯的例子是做Ajax請(qǐng)求時(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è)對(duì)象(記為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
<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è)對(duì)象,作為測試回調(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,"指定顯式對(duì)象上下文回調(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,"指定顯式對(duì)象上下文回調(diào)");
指定obj為method執(zhí)行的上下文,就能夠訪問到對(duì)象內(nèi)部的context。
4、研究DWR
因?yàn)?6年使用DOJO+DWR(1.0)的時(shí)候,已經(jīng)遇到過這個(gè)問題,當(dāng)時(shí)沒做太多功課,直接改了dwr的源代碼。
現(xiàn)在用dwr2,于是想先看看DWR是不是對(duì)這個(gè)問題有新的處理方式,
將dwr.jar中的engine.js拿出來,查看了有關(guān)回調(diào)的相關(guān)代碼(_remoteHandleCallback和_execute),
發(fā)現(xiàn)對(duì)回調(diào)的處理方式似乎比1.0更簡單,沒辦法將對(duì)象和方法一起傳過去。
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í)候,會(huì)自動(dòng)創(chuàng)建一個(gè)closure,
而這個(gè)closure就能記住對(duì)應(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)模擬代碼
模擬代碼只,我們?cè)僭黾右环N回調(diào)方式:
JScript code
<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è)對(duì)象,作為測試回調(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,"指定顯式對(duì)象上下文回調(diào)"); }
// --></script>
</head>
<body> <a href="javascript:void(0)" onclick="testCall()">調(diào)用測試</a> </body>
</html>
測試以上代碼,我們可以發(fā)現(xiàn),通過Closure和通過顯示指定對(duì)象得到的效果一致。
7、模擬更加真實(shí)的調(diào)用情景
但是以上代碼還有一個(gè)問題,通常在真實(shí)環(huán)境中,如果回調(diào)函數(shù)是對(duì)象中方法,那么發(fā)起請(qǐng)求的方法也處在同一個(gè)對(duì)象,
在javascript中,this也可以代表當(dāng)前對(duì)象,但不能直接用在匿名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è)對(duì)象,作為測試回調(diào)函數(shù)的上下文
以上代碼中的this指的不是testObj,而是全局上下文,
需要在closure外寫一個(gè)臨時(shí)變量來代表this,完整的代碼如下:
JScript code
<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è)對(duì)象,作為測試回調(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,"指定顯式對(duì)象上下文回調(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!)
Javascript中的回調(diào)函數(shù),相信大家都不陌生,最明顯的例子是做Ajax請(qǐng)求時(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è)對(duì)象(記為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è)對(duì)象,作為測試回調(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,"指定顯式對(duì)象上下文回調(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,"指定顯式對(duì)象上下文回調(diào)");
指定obj為method執(zhí)行的上下文,就能夠訪問到對(duì)象內(nèi)部的context。
4、研究DWR
因?yàn)?6年使用DOJO+DWR(1.0)的時(shí)候,已經(jīng)遇到過這個(gè)問題,當(dāng)時(shí)沒做太多功課,直接改了dwr的源代碼。
現(xiàn)在用dwr2,于是想先看看DWR是不是對(duì)這個(gè)問題有新的處理方式,
將dwr.jar中的engine.js拿出來,查看了有關(guān)回調(diào)的相關(guān)代碼(_remoteHandleCallback和_execute),
發(fā)現(xiàn)對(duì)回調(diào)的處理方式似乎比1.0更簡單,沒辦法將對(duì)象和方法一起傳過去。
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í)候,會(huì)自動(dòng)創(chuàng)建一個(gè)closure,
而這個(gè)closure就能記住對(duì)應(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)模擬代碼
模擬代碼只,我們?cè)僭黾右环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è)對(duì)象,作為測試回調(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,"指定顯式對(duì)象上下文回調(diào)"); }
// --></script>
</head>
<body> <a href="javascript:void(0)" onclick="testCall()">調(diào)用測試</a> </body>
</html>
測試以上代碼,我們可以發(fā)現(xiàn),通過Closure和通過顯示指定對(duì)象得到的效果一致。
7、模擬更加真實(shí)的調(diào)用情景
但是以上代碼還有一個(gè)問題,通常在真實(shí)環(huán)境中,如果回調(diào)函數(shù)是對(duì)象中方法,那么發(fā)起請(qǐng)求的方法也處在同一個(gè)對(duì)象,
在javascript中,this也可以代表當(dāng)前對(duì)象,但不能直接用在匿名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è)對(duì)象,作為測試回調(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è)對(duì)象,作為測試回調(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,"指定顯式對(duì)象上下文回調(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!)
您可能感興趣的文章:
- 告訴你什么是javascript的回調(diào)函數(shù)
- js中回調(diào)函數(shù)的學(xué)習(xí)筆記
- js的回調(diào)函數(shù)詳解
- 理解javascript中的回調(diào)函數(shù)(callback)
- 淺析JS中回調(diào)函數(shù)及用法
- js 異步操作回調(diào)函數(shù)如何控制執(zhí)行順序
- javascript回調(diào)函數(shù)詳解
- javascript 自定義回調(diào)函數(shù)示例代碼
- JS中的回調(diào)函數(shù)實(shí)例淺析
- 關(guān)于JavaScript回調(diào)函數(shù)的深入理解
相關(guān)文章
配置eslint規(guī)范項(xiàng)目代碼風(fēng)格
這篇文章主要介紹了配置eslint規(guī)范項(xiàng)目代碼風(fēng)格,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03node.js+express+mySQL+ejs+bootstrop實(shí)現(xiàn)網(wǎng)站登錄注冊(cè)功能
這篇文章主要介紹了node.js+express+mySQL+ejs+bootstrop實(shí)現(xiàn)網(wǎng)站登錄注冊(cè)功能,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2018-01-01深入理解javascript作用域第二篇之詞法作用域和動(dòng)態(tài)作用域
這篇文章主要介紹了javascript作用域第二篇之詞法作用域和動(dòng)態(tài)作用域的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,感興趣的朋友可以參考下2016-07-07頁面中body onload 和 window.onload 沖突的問題的解決
關(guān)于頁面中body onload 和 window.onload 沖突的問題的解決2009-07-07