一、前奏

在谈回调函数之前，先看下下面两段代码：
不妨猜测一下代码的结果。

function say (value) {alert(value);
}
alert(say);
alert(say('hi js.'));

如果你测试了，就会发现：=

只写变量名  say   返回的将会是 say方法本身，以字符串的形式表现出来。
而在变量名后加()如say()返回的就会使say方法调用后的结果，这里是弹出value的值。

二、js中函数可以作为参数传递

再看下面的两段代码：

function say (value) {alert(value);
}
function execute (someFunction, value) {someFunction(value);
}
execute(say, 'hi js.');

与

function execute (someFunction, value) {someFunction(value);
}
execute(function(value){alert(value);}, 'hi js.');

上面第一段代码是将say方法作为参数传递给execute方法
第二段代码则是直接将匿名函数作为参数传递给execute方法

实际上：

function say (value) {alert(value);
}
// 注意看下面,直接写say方法的方法名与下面的匿名函数可以认为是一个东西
// 这样再看上面两段代码是不是对函数可以作为参数传递就更加清晰了
say;function (value) {alert(value);
}

这里的say或者匿名函数就被称为回调函数。

三、回调函数易混淆点——传参
如果回调函数需要传参，如何做到，这里介绍两种解决方案。

将回调函数的参数作为与回调函数同等级的参数进行传递

回调函数的参数在调用回调函数内部创建

————————————————

四、其他介绍

 <script type="text/javascript">function add(a, b, fun) {let sum = a + b;fun(sum);}function log(sum) {document.write("我是方法1,拿到的数字是:" + sum+"</br>")}//方法1add(2, 3, log) //方法2: 内嵌函数方法:add(2, 3, function (sum) {document.write("我是方法2,拿到的数字是:" + sum)})</script>

输出结果:

详解

而 js 作为一门脚本语言却相对于java等传统面向对象语言有很大的不同之处, 除了 js 诡异的继承体系之外, 最令人着迷的一个特性就是回调函数, 当然也有很多人对他诟病, 笔者认为回调函数和异步是js语言特性的两大最为突出的店.
javascript 函数也是一种变量可以成为其他函数的参数, 我们喜欢在js中称之为回调函数, 另外js中的匿名函数可以作为函数参数使得回调函数的写法如鱼得水.

ps. 回调函数与 c 语言中的函数指针类似—指针指针指针!!!重要的事情说三遍

回调函数

  function addSqua(num1, num2, callback){var sum = num1 + num2;return callback(sum);}function squa(num){return num*num;}let num = addSqua(1, 2, squa);    console.log(num);//=>9

匿名回调函数

function addSqua(num1, num2, callback){var sum = num1 + num2;return callback(sum);
}
let num = addSqua(1, 2, function squa(num){return num*num;
});
console.log(num);
//=9

*上面的function squa(num){}函数，可以写成function (num){}匿名函数

模仿数组中的every方法

  Array.prototype.myEvery = function (callback) {if (typeof callback === 'function') {for (let i = 0; i < this.length; i++) {if (callback(this[i])) {return false;}   }return true;}return true;}let op = [3, 6, 'every', 9,'each'];op.myEvery(function (value) {console.log(value);})// 3// 6// 'every'// 9// 'each'

回调函数特点

不会立刻执行, 正如定义中给出的一样回调函数作为代码片段可以根据需要在其特定条件下执行, 回调函数作为参数传递给一个函数的时候，传递的只是函数的定义并不会立即执行。
this，ES6推出了箭头函数, 箭头函数的推出需要在写回调函数的时候格外注意, this 是指向所在函数的上下文对象, 如果在在ES6采用箭头函数则需要注意 this使用, 箭头函数中this并没有上下文关系直说, 有兴趣的可以查看ES6 阮一峰, 再次奉上传送门
回调函数的优点和使用场景是个闭包

回调函数是闭包的简单使用，也就是说它能访问到其外层定义的变量。

回调函数之美

-DRY，避免重复代码。
-可以将通用的逻辑抽象。
-业务逻辑分离 (it’s so beautiful ^- ^-)
-提高代码可维护性和可读性。
-加强代码可读性。
-分离专职的函数。
js回调函数的伟大之处是其他传统语言所没有的, 它可以实现业务逻辑分离, 相当于暴露给外界一个接口, 这一点像极了前后端分离架构中的 API 接口设计理念
这个世界没有 ‘银弹’ , 没有能够解决所有事情的一种方案, 由于js为异步而生, 回调函数用的最多的地方, 也是最适合的地方就是异步编程, 然而大量的使用会使得程序员的代码冗余, 有很大的不可读行, 体验极差, 索性让人高兴的事, 人们从来没有停止过对自己舒适度的追求。

*知识点收集与网络

javascript回调函数详解相关推荐

JavaScript的函数详解
JavaScript的函数详解一.什么是函数二.函数的使用 1.函数的声明 2.函数的调用 3.函数的参数:参入运算的数据 (1)形参(形式参数) (2)实参(实在参数): (3)参数之间的数据传 ...
函数指针与回调函数详解
函数指针与回调函数详解 1.什么是函数指针? 函数(的)指针就是指针.这个指针存放一个函数的地址,而函数的名称就该函数的入口,即地址.这类似于数组名就是数组的首地址.我们可以通过反汇编直观的查看到函数 ...
Java 回调函数详解及使用
Java 回调函数详解前言: C语言中回调函数解释: 回调函数(Callback Function)是怎样一种函数呢? 函数是用来被调用的,我们调用函数的方法有两种: 直接调用:在函数A的函数体里通 ...
vue动画过渡 javascript钩子函数详解
vue动画过渡js钩子函数详解前言 js钩子函数运行时间 js钩子函数的过渡或动画总结结语前言转载请注明出处并附上链接. 本文中,enter(leave)过程指的是beforeEnter.e ...
c语言timer linux 回调函数_C语言回调函数详解
1. 什么是回调函数? 回调函数,光听名字就比普通函数要高大上一些,那到底什么是回调函数呢?恕我读得书少,没有在那本书上看到关于回调函数的定义.我在百度上搜了一下,发现众说纷纭,有很大一部分都是使用类 ...
C 语言回调函数详解
1. 什么是回调函数? 回调函数,光听名字就比普通函数要高大上一些,那到底什么是回调函数呢?网络上众说纷纭,有很大一部分都是使用类似这么一个场景来说明:A君去B君店里买东西,恰好缺货,A君留下号码给B ...
java jna 回调函数_JNA中级篇回调函数详解
JNI 技术是双向的,既可以从Java 代码中调用原生函数,也可以从原生函数中直接创建 Java 虚拟机,并调用Java 代码.但是在原生函数中调用java代码要写大量C代码,这对大多数java程序员 ...
php callback,php Callback 回调函数详解
自 PHP 5.4 起可用 callable 类型指定回调类型 callback.本文档基于同样理由使用 callback 类型信息. 一些函数如 call_user_func() 或 usort() ...
JavaScript valueOf() 函数详解
valueOf()函数用于返回指定对象的原始值. 该方法属于Object对象,由于所有的对象都"继承"了Object的对象实例,因此几乎所有的实例对象都可以使用该方法. 所有主流浏 ...
JavaScript闭包函数详解
目录闭包函数变量作用域闭包的概念闭包的用途闭包的缺点闭包函数变量作用域要理解JavaScript闭包,就要先理解JavaScript的变量作用域. 变量的作用域有两种:全局的和局部的( ...

javascript回调函数详解