百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>JS教程> js函数的回调
分享文章到:

js函数的回调

发布时间:09/01 来源:未知 浏览: 关键词:
平常的前端开发工作中,编写js时会有许多地方用到函数的回调。

最简便的例子就是:

<script language="javascript" type="text/javascript">
function doSomething(callback) {
if(typeof callback == "function") {
callback();
}
} 
 
function foo() {
alert("我是回调后施行的函数");
} 
 
doSomething(foo); /*准确*/
doSomething(function(){
alert("我是回调后施行的函数");
}); /*准确*/
doSomething("foo"); /* 这样是不可的,传入的是一个字符串,不是一个函数名 */
</script>

以上只能回调没有参数的(除法你事先知道回调的函数的参数),假如函数有未知的函数,就不克不及如此简便的调取了。

高级办法:

1、使用javascript的call办法

function doSomething(callback,arg1,arg2) {
callback.call(this,arg1,arg2);
}
function foo(arg1,arg2) {
alert(arg1+":"+arg2);
}
doSomething(foo,1,2); /* 弹出了1:2 */

2、使用javascript 的 apply办法

function doSomething(callback,args) {
callback.apply(window,args);
}
function foo(arg1,arg2) {
alert(arg1+":"+arg2);
}
doSomething(foo,[1,2,3]); /* 弹出了1:2 */

可以看成call和apply根本一样,不同就是call只能一个个传参数,apply只能把参数放数组里传进来。

他们的第一个参数都是作用域,比方上面传了this,表示就是和doSomething这个函数一样的作用域,当然你也可以传window,表示整个window的作用域。

3、apply的奇妙用途

apply也可以看作是函数的施行函数,就是用来施行某个函数的函数。所以你会发明,有时候用好apply,有许多本来冗杂的事情会变得如此简便。

比方数组的push办法使用apply来调取:

var arr1=[1,3,4];

var arr2=[3,4,5];

假如我们要把 arr2展开,然后一个一个追加到arr1中去,最后让arr1=[1,3,4,3,4,5]

arr1.push(arr2)明显是不可的。 由于这样做会得到[1,3,4,[3,4,5]]

我们只能用一个轮回去一个一个的push(当然也可以用arr1.concat(arr2),但是concat办法并不改动arr1本身)

var arrLen=arr2.length
for(var i=0;i<arrLen;i++){
    arr1.push(arr2[i]);
}

自从有了Apply,事情就变得如此简便

Array.prototype.push.apply(arr1,arr2)

一行代码就解决了,道理能看的出来,Array.prototype.push是指数组的push函数,apply(arr1,arr2)说明arr1是作用域,就等同于是arr1调取了数组的push函数,

并且arr1确实就是个数组,所以可以调取,arr2表示入参的数组。所以,以上语句等同于:arr1.push(3,4,5)。(push函数支撑传递多个入参,这也是这里可以使用apply的前提前提)

以上语句也可以写成:arr1.push.apply(arr1,arr2); 两者完全等效,由于arr1.push表示arr1的push函数,也就是数组的push函数。

假如使用call就是这样Array.prototype.push.call(arr1,arr2[0],arr2[1]...),明显还是apply适宜。

如果你还问,那直接用arr1.push(3,4,5)不就行了,那已经显露了你的智商,arr2又不是不成以变,下次不是[3,4,5]了呢。

还有猎取数组中,最大的阿谁数字,也可以使用apply调取Math.max函数

var arr1=[1,3,4];

alert(Math.max.apply(window,arr1)); /* 作用域可以不是window,就算是null都行,Math.max.apply(this,arr1),Math.max.apply(null,arr1) */

4、工作中函数回调的实际例子

有了上面的根基,就能看的懂工作中封装好的js的回调函数了

背景:页面A需要使用页面B来选中某个项目,然后带回这个项目的信息给页面A,页面A按照这些信息丰硕本人。

页面A:

noticeInfo = {
selectProject: function () {
var win = newsee.ui.window
win.show('项目列表', '../Project/ProjectSelectList.html?callback=noticeInfo.setProjectInfo', { size: win.winSizeType.big })
//在当前页面弹出框,框里面是另一个页面,地址后面带上需要回调的函数名
//留意这两个页面其实都是在一个页面里面的,并不是像window.open()那样显现了新窗口,所以两个页面的js都是可见的
},
setProjectInfo: function (obj) {
//回调函数,将选中好的项目对象传进来,然后丰硕本人的页面
$('#projectName').val(obj.name)
$('#projectID').val(obj.id)
}
}

页面B:

function SelectBack() {
var callback = newsee.util.url.getQuery('callback'); //猎取页面参数callback,这里猎取到的是"noticeInfo.setProjectInfo",是个字符串
var arr = newsee.ui.grid.getSelectedBack('datagrid') //猎取选中的项目,这个不消深究
if (!arr.length) {
return newsee.ui.window.alert('请选中项目!')
}
newsee.util.url.back(callback, arr[0]) //重点来了,这里施行回调,将需要回调的函数名和入参传进来,arr[0]就是选中的项目的对象的数组了(它也是个数组,里面就一个对象)
}

newsee.util.url.back函数如下:

back : function (funcName) {
// / <param name="funcName" type="String">返回时施行的办法,一样为从新绑定</param>
 
var isWindow = typeof $$winClose === 'function',// 可否为弹窗
args // 弹窗返回办法参数
 
if (isWindow) {// 弹窗的返回办法
$$winClose()
 
args = [].slice.call(arguments) //arguments大家应当都知道的吧,它可以用来猎取函数的实参,它相似数组又不是数组,这句代码就是把它转换成数组,由于apply的入参需如果个数组才行
//args此刻里面有两个元素,args[0]=callback,就是此前传进来的回调函数名,args[1]=arr[0],就是回调函数的入参
newsee.callFunc.apply(newsee, args) //施行 newsee.callFunc 函数,作用域就是newsee本人(等同于newsee本人调取callFunc函数),参数是args
} 
}

newsee.callFunc函数如下:

callFunc: function(funcName, arg) {
var func = typeof funcName === 'function' ? funcName : this.findItem(window, funcName) //上面我有提到过,doSomething("foo"); 传入的是一个字符串,不是一个函数名,所以没法施行
//一样的事理,此刻funcName=args[0]=callback="noticeInfo.setProjectInfo",是个字符串,不克不及直接调取apply,需要变成函数
//这句话就是用来推断funcName是不是一个函数,假如不是,就在window作用域里按照funcName寻到这个函数,然后赋给func
if (typeof func === 'function') {
//此时func已经是个函数了,就是页面A里定义的noticeInfo.setProjectInfo()
try {
return func.apply(window, arg) //施行需回调的函数,作用域仍然是window,反正这个函数在window里必定能寻到,参数就是arg=args[1]=arr[0],即此前在页面B猎取到的项目对象
}
catch (e) {
console.error(e)
}
}
}

ok,需回调的函数就这样被施行了,至于如何按照字符串情势的函数名猎取这个函数,看下面。

//findItem函数如下:
findItem: function(data, key) {
// / <summary>猎取对象指定键的值</summary>
if (this.include(data, key)) { //data这里就是传进来的window,留意window就是一个对象,第一推断window对象里可否存在"noticeInfo.setProjectInfo"这个属性
return eval('data.' + key) //假如存在,就施行"data.noticeInfo.setProjectInfo",这样就猎取到了这个函数了。(eval() 函数可运算某个字符串,并施行其中的的 JavaScript 代码)
}
}
//include函数如下:
include: function(data, key) {
// / <summary>推断对象可否存在键值</summary>
if (data == null || typeof data !== 'object' || !key || typeof key !== 'string') {
return false
}
var keys = key.split('.'),
item = data,
result = true
keys.forEach(function(k) {
if (item != null && typeof item === 'object' && k in item) {
//顺次轮回遍历,第一次item = data,那就是window这个对象,k="noticeInfo",window[noticeInfo]是存在的,由于在页面A里定义了noticeInfo这么一个对象
//第二次轮回,item=window.noticeInfo,k="setProjectInfo",window.noticeInfo[setProjectInfo]也是存在的,由于在页面A里也定义了setProjectInfo这么一个函数
//这里没有第三次轮回了,所以最后返回是true,说明window对象里存在"noticeInfo.setProjectInfo"这个属性,接下来使用eval()拿到它即可
item = item[k]
} else {
return result = false
}
})
 
return result
}

对eval() 函数也介绍一下:

eval() 函数可运算某个字符串,并施行其中的的 JavaScript 代码。

返回值就是通过运算 string 得到的值(假如有的话)。如:

eval("x=10;y=20;document.write(x*y)") //输出 200
document.write(eval("2+2")) //输出 4
var x=10
document.write(eval(x+17)) //输出 27

所以上面的eval('data.' + key)就是施行"data.noticeInfo.setProjectInfo"这个字符串,

由于data在这里就是指window,所以返回值就是window.noticeInfo.setProjectInfo()这个函数

其实可以在简便一点,基本没必要使用eval()来猎取这个函数,由于在include函数里,item就已经是window.noticeInfo.setProjectInfo这个对象了,这个对象就是我们想要的函数。

(在js中函数也是对象,函数名就是这个函数的援用,就和地址差不多)

既然都拿到这个函数了,直接返回不就行了,所以上面的include()和findItem可以这样简化:

include: function(data, key) {
if (data == null || typeof data !== 'object' || !key || typeof key !== 'string') {
}else{
var keys = key.split('.'),
item = data,
result = true
keys.forEach(function(k) {
if (item != null && typeof item === 'object' && k in item) {
item = item[k]
} else {
result = false;
}
})
if(result)
return item
}
},
findItem: function(data, key) {
return this.include(data, key)

经过测试,发明这两个按照字符串情势的函数名猎取函数的办法都可以到达千篇一律的结果。

以上就是js函数的回调的具体内容,更多请关注百分百源码网其它相关文章!

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有151人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板