详解JavaScript的回调函数

什么是回调或高级函数

回调函数是如何实现的

实现回调函数的基本原则

回调地狱的问题和解决方案

实现自己的回调函数

在JavaScrip中,function是内置的类对象,也就是说它是一种类型的对象,可以和其它String、Array、Number、Object类的对象一样用于内置对象的管理。因为function实际上是一种对象,它可以“存储在变量中,通过参数传递给(别一个)函数(function),在函数内部创建,从函数中返回结果值”。

因为function是内置对象,我们可以将它作为参数传递给另一个函数,延迟到函数中执行,甚至执行后将它返回。这是在JavaScript中使用回调函数的精髓。本篇文章的剩余部分将全面学习JavaScript的回调函数。回调函数也许是JavaScript中使用最广泛的功能性编程技术,也许仅仅一小段JavaScript或jQuery的代码都会给开发者留下一种神秘感,阅读这篇文章后,也许会帮你消除这种神秘感。
回调函数来自一种著名的编程范式——函数式编程,在基本层面上,函数式编程指定的了函数的参数。函数式编程虽然现在的使用范围变小了,但它一直被“专业的聪明的”程序员看作是一种难懂的技术,以前是这样,未来也将是如此。

幸运的是,函数式编程已经被阐述的像你我这样的一般人也能理解和使用。函数式编程最主要的技术之一就是回调函数,你很快会阅读到,实现回调函数就像传递一般的参数变量一样简单。这项技术如此的简单,以至于我都怀疑为什么它经常被包含在JavaScript的高级话题中去。

一、什么是回调或高级函数?

回调函数被认为是一种高级函数,一种被作为参数传递给另一个函数(在这称作"otherFunction")的高级函数,回调函数会在otherFunction内被调用(或执行)。回调函数的本质是一种模式(一种解决常见问题的模式),因此回调函数也被称为回调模式。

思考一下下面这种在jQuery中常用的回调函数:

//Note that the item in the click method's parameter is a function, not a variable. //The item is a callback function $("#btn_1").click(function() { alert("Btn 1 Clicked"); });

正如在前面的例子所看到的,我们传递了一个函数给click方法的形参,click方法将会调用(或执行)我们传递给它的回调函数。这个例子就给出了JavaScript中使用回调函数的一个典型方式,并广泛应用于jQuery中。

细细体味一下另一个基本JavaScript的典型例子:

var friends = ["Mike", "Stacy", "Andy", "Rick"]; friends.forEach(function (eachName, index){ console.log(index + 1 + ". " + eachName); // 1. Mike, 2. Stacy, 3. Andy, 4. Rick });

我们再一次用同样的方式传递了一个匿名的函数(没有函数名的函数)给forEach方法,作为forEach的参数。

到目前为止,我们传递了一个匿名的函数作为参数给另一个函数或方法。在看其它更复杂的回调函数之前,让我们理解一下回调的工作原理并实现一个自己的回调函数。

二、回调函数是如何实现的?

我们可以像使用变量一样使用函数,作为另一个函数的参数,在另一个函数中作为返回结果,在另一个函数中调用它。当我们作为参数传递一个回调函数给另一个函数时,我们只传递了这个函数的定义,并没有在参数中执行它。

当包含(调用)函数拥有了在参数中定义的回调函数后,它可以在任何时候调用(也就是回调)它。

这说明回调函数并不是立即执行,而是在包含函数的函数体内指定的位置“回调”它(形如其名)。所以,即使第一个jQuery的例子看起来是这样:

//The anonymous function is not being executed there in the parameter. //The item is a callback function $("#btn_1").click(function() { alert("Btn 1 Clicked"); });

匿名函数将延迟在click函数的函数体内被调用,即使没有名称,也可以被包含函数通过 arguments对象访问。

回调函数是闭包的
当作为参数传递一个回调函数给另一个函数时,回调函数将在包含函数函数体内的某个位置被执行,就像回调函数在包含函数的函数体内定义一样。这意味着回调函数是闭包的,想更多地了解闭包,请参考作者另一个贴子Understand JavaScript Closures With Ease。从所周知,闭包函数可以访问包含函数的作用域,所以,回调函数可以访问包含函数的变量,甚至是全局变量。

三、实现回调函数的基本原则

简单地说,自己实现回调函数的时候需要遵循几条原则。

1、使用命名函数或匿名函数作为回调
在前面的jQuery和forEach的例子中,我们在包含函数的参数中定义匿名函数,这是使用回调函数的通用形式之一,另一个经常被使用的形式是定义一个带名称的函数,并将函数名作为参数传递给另一个函数,例如:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgzjdy.html