javascript中的回调函数中变量作用域
2010-09-26 17:06
537 查看
1,在callObjMethod方法中,我用了两种方式回调“method"方法:
第一种方式:method("通过默认上下文回调");
没有指定上下文,我们发现回调函数内部访问context的值是全局变量的值,
这说明,执行该方法的默认上下文是全局上下文。
第二种方式:method.call(obj,"指定显式对象上下文回调");
指定obj为method执行的上下文,就能够访问到对象内部的context
2,在javascript中,在function内部创建一个function的时候,会自动创建一个closure,
而这个closure就能记住对应的function创建时的上下文
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,完整的代码如下:
第一种方式: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>
相关文章推荐
- javascript中的回调函数中变量作用域
- javascript的函数内部变量的作用域
- javascript基础:函数传递参数的方式、参数数组、变量范围(变量作用域)
- JavaScript中的作用域与函数和变量声明的提升
- [JavaScript] 模拟块级作用域、私有变量/函数
- javascript基础(函数与方法的区别,变量作用域,变量和函数的声明提前,函数作用域)(十五)
- JavaScript 函数总体概述(函数声明/参数传递/返回值/加载/变量和作用域/变量声明提升/匿名函数/回调函数)
- JavaScript-4.2函数,变量作用域---ShinePans
- Javascript的变量作用域居然可以跨越多个函数!
- JavaScript--变量作用域、函数作用域及作用域链
- javascript中函数中定义变量的作用域
- Javascript的变量作用域居然可以跨越多个函数!
- JavaScript-函数(二)变量作用域与解析赋值
- JavaScript的变量及函数(变量提升、嵌套作用域、条件语句、严格模式、IIFE、闭包、模块化、this、原型)
- javascript和python函数中变量作用域的区别
- JavaScript 变量作用域、函数作用域、作用域链
- javascript 函数初探 (三)--- javascript 变量的作用域
- JavaScript 基础(五) 函数 变量和作用域
- JavaScript学习记录day6-函数变量作用域、解构赋值与方法
- javascript中变量没有块级作用域---函数内申明的变量在整个函数中都有效!