js怎样获取调用回调函数的参数值

JavaScript014

js怎样获取调用回调函数的参数值,第1张

代码如下:

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:200pxheight:200pxbackground-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参数就是这么被赋值的,说了这些你们也大概有个了解了,以及怎么使用了。

回调在各种框架中应用的比较多,有时候自己写一些东西的时候也可以根据实际情况用用看。

function doAjax(u,param,callback){

$.ajax({

type:'POST',

url:u,

data:param,

success:callback

})

}

function showAlert(data,test1,test2){

alert(data+" "+test1+" "+test2)

}

window.onload = doAjax("server.php","id=12&type=1",function(data){showAlert(data,3,5)})

执行doAjax的时候,回调函数的调用改一下就可以了。

测试过没问题。