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

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> 

 

 

相关推荐
<p> <span style="font-size:14px;color:#E53333;">限时福利1:</span><span style="font-size:14px;">购课进答疑群专享柳峰(刘运强)老师答疑服务</span> </p> <p> <br /> </p> <p> <br /> </p> <p> <span style="font-size:14px;"></span> </p> <p> <span style="font-size:14px;color:#337FE5;"><strong>为什么需要掌握高性能MySQL实战?</strong></span> </p> <p> <span><span style="font-size:14px;"><br /> </span></span> <span style="font-size:14px;">由于互联网产品用户量大、高并发请求场景多,因此对MySQL性能、可用性、扩展性都提出了很高要求。使用MySQL解决大量数据以及高并发请求已经是程序员必备技能,也是衡量一个程序员能力和薪资标准之一。</span> </p> <p> <br /> </p> <p> <span style="font-size:14px;">为了让大家快速系统了解高性能MySQL核心知识全貌,我为你总结了</span><span style="font-size:14px;">「高性能 MySQL 知识框架图」</span><span style="font-size:14px;">,帮你梳理学习重点,建议收藏!</span> </p> <p> <br /> </p> <p> <img alt="" src="https://img-bss.csdnimg.cn/202006031401338860.png" /> </p> <p> <br /> </p> <p> <span style="font-size:14px;color:#337FE5;"><strong>【课程设计】</strong></span> </p> <p> <span style="font-size:14px;"><br /> </span> </p> <p> <span style="font-size:14px;">课程分为四大篇章,将为你建立完整 MySQL 知识体系,同时将重点讲解 MySQL 底层运行原理、数据库性能调优、高并发、海量业务处理、面试解析等。</span> </p> <p> <span style="font-size:14px;"><br /> </span> </p> <p> <span style="font-size:14px;"></span> </p> <p style="text-align:justify;"> <span style="font-size:14px;"><strong>一、性能优化篇:</strong></span> </p> <p style="text-align:justify;"> <span style="font-size:14px;">主要包括经典 MySQL 问题剖析、索引底层原理和事务与锁机制。通过深入理解 MySQL 索引结构 B+Tree ,学员能够从根本上弄懂为什么有些 SQL 走索引、有些不走索引,从而彻底掌握索引使用和优化技巧,能够避开很多实战遇到“坑”。</span> </p> <p style="text-align:justify;"> <br /> </p> <p style="text-align:justify;"> <span style="font-size:14px;"><strong>二、MySQL 8.0新特性篇:</strong></span> </p> <p style="text-align:justify;"> <span style="font-size:14px;">主要包括窗口函数和通用表表达式。企业许多报表统计需求,如果不采用窗口函数,用普通 SQL 语句是很难实现。</span> </p> <p style="text-align:justify;"> <br /> </p> <p style="text-align:justify;"> <span style="font-size:14px;"><strong>三、高性能架构篇:</strong></span> </p> <p style="text-align:justify;"> <span style="font-size:14px;">主要包括主从复制和读写分离。在企业生产环境,很少采用单台MySQL节点情况,因为一旦单个节点发生故障,整个系统都不可用,后果往往不堪设想,因此掌握高可用架构实现是非常有必要。</span> </p> <p style="text-align:justify;"> <br /> </p> <p style="text-align:justify;"> <span style="font-size:14px;"><strong>四、面试篇:</strong></span> </p> <p style="text-align:justify;"> <span style="font-size:14px;">程序员获得工作第一步,就是高效准备面试,面试篇主要从知识点回顾总结角度出发,结合程序员面试高频MySQL问题精讲精练,帮助程序员吊打面试官,获得心仪工作机会。</span> </p>
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页