javascript中的回調函數中變量作用域

1,在callObjMethod方法中,我用了兩種方式回調“method"方法: 
第一種方式:method("通過默認上下文回調"); 
沒有指定上下文,我們發現回調函數內部訪問context的值是全局變量的值, 
這說明,執行該方法的默認上下文是全局上下文。 
第二種方式:method.call(obj,"指定顯式對象上下文回調"); 
指定obj爲method執行的上下文,就能夠訪問到對象內部的context

 

[xhtml] view plaincopy
 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
  2. "http://www.w3.org/TR/html4/loose.dtd">  
  3. <html>  
  4. <head>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  6. <mce:script type="text/javascript"><!--  
  7. var context="全局";  
  8. var testObj={   
  9.     context:"初始",   
  10.     callback:function (str){   
  11.       //回調函數   
  12.       alert("callback:我所處的上下文中,context="+this.context+",我被回調的方式:"+str);   
  13.     }   
  14. };   
  15. //創建一個對象,作爲測試回調函數的上下文   
  16. testObj.context="已設置";   
  17. function testCall(){   
  18.     callMethod(testObj.callback);   
  19.     callObjMethod(testObj,testObj.callback);   
  20. }   
  21. function callMethod(method){   
  22.     method("通過默認上下文回調");   
  23. }   
  24. function callObjMethod(obj,method){   
  25.     method.call(obj,"指定顯式對象上下文回調");   
  26. }  
  27. // --></mce:script>   
  28. </head>   
  29. <body> <a href="javascript:void(0)" mce_href="javascript:void(0)" onclick="testCall()">調用測試</a> </body>   
  30. </html>  

 

 

2,在javascript中,在function內部創建一個function的時候,會自動創建一個closure, 

而這個closure就能記住對應的function創建時的上下文

 

[xhtml] view plaincopy
 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
  2. "http://www.w3.org/TR/html4/loose.dtd">  
  3. <html>  
  4. <head>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  6. <mce:script type="text/javascript"><!--  
  7. var context="全局";  
  8. var testObj={   
  9.     context:"初始",   
  10.     callback:function (str){   
  11.     //回調函數   
  12.     alert("callback:我所處的上下文中,context="+this.context+",我被回調的方式:"+str);   
  13.     }   
  14. };  
  15. //創建一個對象,作爲測試回調函數的上下文   
  16. testObj.context="已設置";  
  17. function testCall(){   
  18.     callMethod(testObj.callback);   
  19.     callWithClosure(function(param){testObj.callback(param);});   
  20.     callObjMethod(testObj,testObj.callback);   
  21. }   
  22. function callMethod(method){ method("通過默認上下文回調"); }   
  23. function callWithClosure(method){ method("通過Closure保持上下文回調"); }   
  24. function callObjMethod(obj,method){ method.call(obj,"指定顯式對象上下文回調"); }  
  25. // --></mce:script>   
  26. </head>   
  27. <body> <a href="javascript:void(0)" mce_href="javascript:void(0)" onclick="testCall()">調用測試</a> </body>   
  28. </html>  

 

 

3,在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,完整的代碼如下:

 

 

[xhtml] view plaincopy
 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
  2. "http://www.w3.org/TR/html4/loose.dtd">  
  3. <html>  
  4. <head>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  6. <mce:script type="text/javascript"><!--  
  7. var context="全局";  
  8. var testObj={   
  9.     context:"初始",   
  10.     callback:function (str){   
  11.         //回調函數   
  12.         alert("callback:我所處的上下文中,context="+this.context+",我被回調的方式:"+str);   
  13.     },   
  14.     caller:function(){   
  15.         callWithClosure(function(param){this.callback(param);});   
  16.         var temp=this;   
  17.         callWithClosure(function(param){temp.callback(param);});   
  18.     }   
  19. };   
  20. //創建一個對象,作爲測試回調函數的上下文   
  21. testObj.context="已設置";   
  22. function testCall(){   
  23. //callMethod(testObj.callback);   
  24. testObj.caller();   
  25. //callWithClosure(function(param){testObj.callback(param);});   
  26. //callObjMethod(testObj,testObj.callback);   
  27. }   
  28. function callObjMethod(obj,method){method.call(obj,"指定顯式對象上下文回調"); }   
  29. function callMethod(method){ method("通過默認上下文回調"); }   
  30. function callWithClosure(method){ method("通過Closure保持上下文回調"); }   
  31. function callback(str){ alert("callback:我是定義在外部的全局函數。"); }  
  32. // --></mce:script>   
  33. </head>   
  34. <body> <a href="javascript:void(0)" mce_href="javascript:void(0)" onclick="testCall()">調用測試</a> </body>   
  35. </html>  
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章