对js中回调函数的一些看法
最近在忙公司android的项目，所以也就很少抽时间来写些东西了。刚闲下来，我就翻了翻之前看的东西。做了android之后更加感觉到手机端开发的重要性，现在做native App 和Web App是主流，也就是说现在各种基于浏览器的web app框架也会越来越火爆了，做js的也越来越有前途。我也决定从后端开发渐渐向前端开发和手机端开发靠拢，废话不说了，我们来切入正题“js的回调函数”相关的东西。
说起回调函数，好多人虽然知道意思，但是还是一知半解。至于怎么用，还是有点糊涂。网上的一些相关的也没有详细的说一下是怎么回事，说的比较片面。下面我只是说说个人的一点理解，大牛勿喷。我们来看一下一个粗略的一个定义“函数a有一个参数，这个参数是个函数b，当函数a执行完以后执行函数b。那么这个过程就叫回调。”，这句话的意思是函数b以一个参数的形式传入函数a并执行，顺序是先执行a ，然后执行参数b,b就是所谓的回调函数。我们先来看下面的例子。
function a(callback){
alert('a');
callback.call(this);//或者是 callback（）, callback.apply(this),看个人喜好
}
function b(){
alert('b');
}
//调用
a(b);
这样的结果是先弹出 'a'，再弹出‘b'。这样估计会有人问了“写这样的代码有什么意思呢？好像没太大的作用呢！”
是的，其实我也觉得这样写没啥意思，“如果调用一个函数就直接在函数里面调用它不就行了”。我这只是给大家写个小例子，做初步的理解。真正写代码的过程中很少用这样无参数的，因为在大部分场景中，我们要传递参数。来个带参数的：
function c(callback){
alert('c');
callback.call(this,'d');
}
//调用
c(function(e){
alert(e);
});
这个调用看起来是不是似曾相识，这里e参数被赋值为'd'，我们只是简单的赋值为字符窜，其实也可以赋值为对象。Jquery里面是不是也有个e参数，下面我们就来讲讲
Jquery里面的e参数是如何被回调赋值的。
Jquery框架我想大家不陌生了，出来了好久，开发的时候都在用，比较简单，api网上搜起来很方便，上手快。在Jquery框架下，我们有时候要获取事件中的一些参数，比如我要获取当前点击的坐标，点击的元素对象。这个需求在Jquery里面好办 ：
$("#id").bind('click',function(e){
//e.pageX ,e.pageY ,e.target.....各种数据
});
用起来倒是挺方便，其实这个e参数的赋值也是通过回调函数来实现的，这个参数是用回调参数给它赋予了一个对象值，仔细研究过JJquery源码的朋友应该发现了这一点。
还有Ajax里面 $.get('',{},function(data){}) data这个参数也是同样的原理。
我们来看看Jquery事件对象里面是怎么应用回调函数的。
为了方便，我简单的写了一下$相关的一些实现，之前写过“小谈Jquery”里面有比较接近框架实现的方法，我下面只是写一个简易的选择器。
<div id="container" style="width:200px;height:200px;background-Color:green;">
</div>
<script>
var _$=function (id)
{
this.element= document.getElementById(id);
}
_$.prototype={
bind:function(evt,callback)
{
var that=this;
if(document.addEventListener)
{
this.element.addEventListener(evt, function(e){
callback.call(this,that.standadize(e));
} ,false);
}
else if(document.attachEvent)
{
this.element.attachEvent('on'+evt,function(e){
callback.call(this,that.standadize(e));
});
}
else
this.element['on'+evt]=function(e){
callback.call(this,that.standadize(e));
};
},
standadize:function(e){
var evt=e||window.event;
var pageX,pageY,layerX,layerY;
//pageX 横坐标 pageY纵坐标 layerX点击处位于元素的横坐标 layerY点击处位于元素的纵坐标
if(evt.pageX)
{
pageX=evt.pageX;
pageY=evt.pageY;
}
else
{
pageX=document.body.scrollLeft+evt.clientX-document.body.clientLeft;
pageY=document.body.scrollTop+evt.clientY-document.body.clientLTop;
}
if(evt.layerX)
{
layerX=evt.layerX;
layerY=evt.layerY;
}
else
{
layerX=evt.offsetX;
layerXY=evt.offsetY;
}
return {
pageX:pageX,
pageY:pageY,
layerX:layerX,
layerY:layerY
}
}
}
window.$=function(id)
{
return new _$(id);
}
$('container').bind('click',function(e){
alert(e.pageX);
});
$('container1').bind('click',function(e){
alert(e.pageX);
});
</script>
这段代码我们主要看standadize函数的实现，兼容性的代码，就不多说了，返回的是一个对象
return {
pageX:pageX,
pageY:pageY,
layerX:layerX,
layerY:layerY
}
然后再看bind函数里面的代码 callback.call(this,that.standadize(e))，这段代码其实就是给e参数赋值了，是用callback回调实现的。
callback 函数被调用的时候传入的是匿名函数
function(e){
}
而callback.call(this,that.standadize(e))相当于是执行了这么一段代码
(function(e){
})(standadize(e))
这也是Jquery用回调函数比较经典的地方，e参数就是这么被赋值的，说了这些你们也大概有个了解了，以及怎么使用了。
回调在各种框架中应用的比较多，有时候自己写一些东西的时候也可以根据实际情况用用看。
以上这篇对js中回调函数的一些看法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
bootstrap table之通用方法（ 时间控件，导出，动态下拉框， 表单验证 ，选中与获取信息）代码分享
这篇文章主要介绍了bootstrap table之通用方法（ 时间控件，导出，动态下拉框， 表单验证 ，选中与获取信息）代码分享，非常不错，具有参考借鉴价值，需要的朋友参考下吧2017-01-01
今天小编就为大家分享一篇layui点击按钮页面会自动刷新的解决方案，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
js中forEach的用法之forEach与for之间的区别
这篇文章主要介绍了js中forEach的用法之forEach与for之间的区别，forEach() 调用数组的每个元素，并将元素传递给回调函数，下面更多详细介绍需要的小伙伴可以参考一下2022-03-03
九种js弹出对话框的方法总结，需要的朋友可以参考一下2013-03-03
ES2015 推出了JS 的 Promise ，而在没有原生支持的时候，我们也可以使用诸如 Promises/A+ 的库的帮助，在我们的代码里实现Promise 的支持，下面这篇文章主要给大家介绍了如何从零开始利用js手写一个Promise库的相关资料，需要的朋友可以参考下。2018-04-04
这篇文章主要介绍了如何利用Cesium绘制栅栏效果的示例代码，文中的示例代码讲解详细，对我们学习或工作有一定的帮助，需要的可以参考一下2022-06-06
这篇文章主要为大家详细介绍了微信小程序实现单选选项卡切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-02-02
这篇文章主要为大家详细介绍了js实现动态加载数据瀑布流，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
基于web的技术中，分页是一个老的不能再老的，但大家津津乐道的问题，随着xml技术的日渐应用，把xml应用到分页当中，也是一种可能，当然网上的教程很多，当我都是看得稀里糊涂，索性自己写一个，与大家分享、指正。2008-07-07
这篇文章主要为大家详细介绍了js实现简单页面全屏的功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
最新评论