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

最新推荐文章于 2022-05-09 10:23:10 发布

张驰Terry

最新推荐文章于 2022-05-09 10:23:10 发布

阅读量7.6k

点赞数 5

分类专栏：软件研发文章标签： javascript js

本文链接：https://blog.csdn.net/terrychinaz/article/details/8223735

版权

软件研发专栏收录该内容

663 篇文章 26 订阅

订阅专栏

1,在callObjMethod方法中，我用了两种方式回调“method"方法：

第一种方式：method("通过默认上下文回调");
没有指定上下文，我们发现回调函数内部访问context的值是全局变量的值，
这说明，执行该方法的默认上下文是全局上下文。
第二种方式：method.call(obj,"指定显式对象上下文回调");
指定obj为method执行的上下文，就能够访问到对象内部的context

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
"http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<mce:script type="text/javascript"><!--  
var context="全局";  
var testObj={   
    context:"初始",   
    callback:function (str){   
      //回调函数   
      alert("callback:我所处的上下文中，context="+this.context+"，我被回调的方式："+str);   
    }   
};   
//创建一个对象，作为测试回调函数的上下文   
testObj.context="已设置";   
function testCall(){   
    callMethod(testObj.callback);   
    callObjMethod(testObj,testObj.callback);   
}   
function callMethod(method){   
    method("通过默认上下文回调");   
}   
function callObjMethod(obj,method){   
    method.call(obj,"指定显式对象上下文回调");   
}  
// --></mce:script>   
</head>   
<body> <a href="javascript:void(0)" mce_href="javascript:void(0)" onclick="testCall()">调用测试</a> </body>   
</html>

2,在javascript中，在function内部创建一个function的时候，会自动创建一个closure，

而这个closure就能记住对应的function创建时的上下文

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
"http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<mce:script type="text/javascript"><!--  
var context="全局";  
var testObj={   
    context:"初始",   
    callback:function (str){   
    //回调函数   
    alert("callback:我所处的上下文中，context="+this.context+"，我被回调的方式："+str);   
    }   
};  
//创建一个对象，作为测试回调函数的上下文   
testObj.context="已设置";  
function testCall(){   
    callMethod(testObj.callback);   
    callWithClosure(function(param){testObj.callback(param);});   
    callObjMethod(testObj,testObj.callback);   
}   
function callMethod(method){ method("通过默认上下文回调"); }   
function callWithClosure(method){ method("通过Closure保持上下文回调"); }   
function callObjMethod(obj,method){ method.call(obj,"指定显式对象上下文回调"); }  
// --></mce:script>   
</head>   
<body> <a href="javascript:void(0)" mce_href="javascript:void(0)" onclick="testCall()">调用测试</a> </body>   
</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,完整的代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
"http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<mce:script type="text/javascript"><!--  
var context="全局";  
var testObj={   
    context:"初始",   
    callback:function (str){   
        //回调函数   
        alert("callback:我所处的上下文中，context="+this.context+"，我被回调的方式："+str);   
    },   
    caller:function(){   
        callWithClosure(function(param){this.callback(param);});   
        var temp=this;   
        callWithClosure(function(param){temp.callback(param);});   
    }   
};   
//创建一个对象，作为测试回调函数的上下文   
testObj.context="已设置";   
function testCall(){   
//callMethod(testObj.callback);   
testObj.caller();   
//callWithClosure(function(param){testObj.callback(param);});   
//callObjMethod(testObj,testObj.callback);   
}   
function callObjMethod(obj,method){method.call(obj,"指定显式对象上下文回调"); }   
function callMethod(method){ method("通过默认上下文回调"); }   
function callWithClosure(method){ method("通过Closure保持上下文回调"); }   
function callback(str){ alert("callback:我是定义在外部的全局函数。"); }  
// --></mce:script>   
</head>   
<body> <a href="javascript:void(0)" mce_href="javascript:void(0)" onclick="testCall()">调用测试</a> </body>   
</html>