JavaScript之callback回调函数
以下内容借鉴老鸟的经验和知识,结合自己的学习,精髓的总结。
一句话:对于以后研究node 和那些热门的前端框架 很有帮助。如果你看过这个文章,对于你来说是质的突变。
理解javascript中的回调函数(`callback`),希望对你有所帮助。
在JavaScrip中,function是内置的类对象,也就是说它是一种类型的对象,和其它String、Array、Number、Object类的对象一样用于内置对象的管理。
function实际上是一种对象,它可以“存储在变量中,通过参数传递给(别一个)函数(function),在函数内部创建,从函数中返回结果值”。
函数式编程最主要的技术之一就是回调函数,实现回调函数就像传递一般的参数变量一样简单。
## 那么第一个问题来了,什么是回调?
回调函数被认为是一种高级函数,一种被作为参数传递给另一个函数(在这称作`otherFunction`)的高级函数。回调函数会在`otherFunction`内被调用(或执行)。
回调函数的本质是一种模式(一种解决常见问题的模式),因此回调函数也被称为回调模式。
>举个列子:
var colors=[ 'red', 'yellow', 'blue', 'green']; colors.forEach(function(color,i){ console.log( i + 1 + '.' + color) // 控制台输出结果:1.red, 2.yellow, .blue, 4.green })
这里我们传递一个匿名函数给`foreach`方法,作为`foreach`的参数,传递了一个匿名的函数作为参数给另一个函数或方法。
>这里举一个 jquery 常用的回调函数:
<button class="btn">btn</button> $(".btn").click(function() { //匿名函数将延迟在click函数的函数体内被调用,即使没有名称,也可以被包含函数通过 arguments对象访问。
alert("clicked"); });
}
同样这里 传递一个函数给click方法的参数,click方法将会调用(或执行)传递给他的回调函数。
## 讲了这么多,回调函数是怎么实现的呢?
回调函数作为变量一样使用,来作为另一个函数的参数,在另一个函数中作为返回的结果,在另一个函数中调用它。
这里我们作为参数传递一个回调函数给另一个函数时,我们只传递了函数的定义并没有在参数中执行它。
当函数(这里指的是调用或者执行函数)拥有了参数中定义的回调函数后,它可以在任何时候调用。
也说明了回调函数不是立即执行的,而是在包含函数的函数体内指定的位置回调它。
>再来看下这个例子
function sum(callback) { //Array.prototype.slice.call(arguments,1)能将具有length属性的对象转成数组,arguments是一个关键字,代表当前参数,在javascript中虽然arguments表面上以数组形式来表示,但实际上没有原生数组slice的功能。
//这里使用call方法算是对arguments对象不完整数组功能的修正。 //slice返回一个数组,该方法只有一个参数的情况下表示除去数组内的第一个元素。就本上下文而言,原数组的第一个参元数是函数名为add的回调函数,其后的元素才是处理函数所接纳的参数列表。 var args = Array.prototype.slice.call(arguments, 1); //通俗的来讲,这一行代码的作用是把函数接受的所有的形参组成一个数组,删除数组内的第一个元素,把数组赋值给args typeof callback === 'function' && callback(args); //若参数中存在回调函数,把args作为形参传给这一回调函数并执行。 console.log(args) } //把传进来的数组内的所有元素进行相加 function add(options) { var totle = 0; options.map(function(item) { if (typeof item === 'object' && Object.prototype.toString.call(item) === '[object Array]') { item.map(function(itemCell) { totle += itemCell }) } else { totle += item; } }) console.log(totle); } sum(add, 1, 2, 3, 4, 5, [10, 20])
来看下控制台的输出结果:
Array(6)便是除回调函数外所有形参组成的数组,45是回调函数内对Array(6)内所有元素进行相加的结果。
> 回调函数是闭包的
当作为参数传递另一个函数时,回调函数将在包含函数函数体内的某个位置被执行,就像回调函数在包含函数的函数体内定义一样。这意味着回调函数是闭包的.。
## 实现回调函数的基本原则
> 使用命名函数或匿名函数作为回调
在前面的jQuery和forEach的例子中,我们在包含函数的参数中定义匿名函数,这是使用回调函数的通用形式之一。
另一个经常被使用的形式是定义一个带名称的函数,并将函数名作为参数传递给另一个函数,例如:
function fn() { console.log("带名称函数") } function test1(fn) { fn(); } test1(fn);