javascript中的回调函数中变量作用域

http://blog.csdn.net/terrychinaz/article/details/8223735

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> 
posted @ 2015-08-21 20:55  jimshi  阅读(2330)  评论(0)  编辑  收藏  举报