博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript回调函数的实现
阅读量:5838 次
发布时间:2019-06-18

本文共 1440 字,大约阅读时间需要 4 分钟。

https://github.com/forsigner/blog/blob/master/source/_posts/javascript-callback.md

 

在JavaScript中,回调函数的使用非常频繁。特别是在各种Javascript库中,经常在一个函数中使用回调函数,例如jQuery中的each()方法。一年以来,在使用各种有回调函数的函数时,都没有去深究其内部的实现原理真,惭愧。在有米实习时,在读js师兄的代码时,偶然看到他写的一个函数是他自己实现回调函数的,当时感觉很神奇,原来这就是回调函数啊,之后google了很多关于Javascript回调函数的资料,终于大概弄明白回调函数是什么了。以下是自己对回调函数的一些理解。

回调函数定义:... 理论一直是我的弱项,定义暂时没法定,以后弄懂再补上,我暂时只懂它的用法orz。

回调函数的基本实现:

// 声明一个函数,它的参数是一个函数fnfunction example(fn)  {    // 回调前,可以do something alert('我是回调前执行的代码'); // 存在fn则直接用,不存fn在则用函数表达式的方式声明一个 fn = fn || function() {}; fn(); // 调用传进来的fn } // 调用传进来的fn function callback() { alert('I am callback!') } example(callback); // 调用函数a

这个例子展示回调函数基本实现方法,实现回调的关键是把一个函数当成另一个参数。当然实践中很少用上面方式去使用回调函数,一般把一个匿名函数传入当成回调函数,这种方法在Javascript中使用非常广泛,下面是一个基本的例子。

// 声明一个函数,它的参数是一个函数fnfunction example(fn) {// 回调前,可以do something alert('我是回调前执行的代码'); // 存在fn则直接用,不存fn在则用函数表达式的方式声明一个 fn = fn || function() {}; fn(); // 调用传进来的fn } // 把匿名函数当做参数 example(function() { alert('I am callback!') });

使用匿名函数作为参数,不仅可以极少代码,也让代码更好管理,更加灵活。

任何函数都是可以传入参数的,回调函数一样:

// 声明一个函数,它的参数是一个函数fnfunction example(a, fn) { // 回调前,可以do something alert(a); // 存在fn则直接用,不存fn在则用函数表达式的方式声明一个 fn = fn || function() {}; fn(m); // 调用传进来的fn } // 把匿名函数当做参数 var m = 'I am callback!'; example('我是回调前执行的代码', function(m) { alert(m) });

以上就是Javascript回调函数的实现方法和简单用法,关于回调函数的作用,我的理解是:其实,每个函数的定义都是为了实现某些功能,在一个拥有回调函数的函数中,一般把实现一个功能的通用代码写在回调函数前,其实后也可以,而开发者在回调函数中自定义自己需要的功能。文艺一点,就是回调函数让世界更加多姿多彩。

done。

转载地址:http://wfjcx.baihongyu.com/

你可能感兴趣的文章
測試文章
查看>>
Flex很难?一文就足够了
查看>>
【BATJ面试必会】JAVA面试到底需要掌握什么?【上】
查看>>
CollabNet_Subversion小结
查看>>
mysql定时备份自动上传
查看>>
17岁时少年决定把海洋洗干净,现在21岁的他做到了
查看>>
《写给大忙人看的java se 8》笔记
查看>>
倒计时:计算时间差
查看>>
Linux/windows P2V VMWare ESXi
查看>>
Windows XP倒计时到底意味着什么?
查看>>
运维工程师在干什么学些什么?【致菜鸟】
查看>>
Linux中iptables详解
查看>>
java中回调函数以及关于包装类的Demo
查看>>
maven异常:missing artifact jdk.tools:jar:1.6
查看>>
终端安全求生指南(五)-——日志管理
查看>>
Nginx 使用 openssl 的自签名证书
查看>>
创业维艰、守成不易
查看>>
PHP环境安装套件:快速安装LAMP环境
查看>>
CSS3
查看>>
ul下的li浮动,如何是ul有li的高度
查看>>