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);
时间: 2024-10-02 01:20:19

JavaScript之callback回调函数的相关文章

理解javascript中的回调函数(callback)【转】

在JavaScrip中,function是内置的类对象,也就是说它是一种类型的对象,可以和其它String.Array.Number.Object类的对象一样用于内置对象的管理.因为function实际上是一种对象,它可以"存储在变量中,通过参数传递给(别一个)函数(function),在函数内部创建,从函数中返回结果值". 因为function是内置对象,我们可以将它作为参数传递给另一个函数,延迟到函数中执行,甚至执行后将它返回.这是在JavaScript中使用回调函数的精髓.本篇文

JavaScript中的回调函数

在学习JavaScript的过程中遇到了很多,使用到回调函数的例子,出现了许多疑问,就由一个栗子开始吧: 在JavaScript中接触的第一个回调函数是在setInterval()和setTimeout()中出现的: 1 var num = 10; 2 3 var interValId = setInterval(function (){ 4 console.log(num); 5 num--; 6 if(num==0){ 7 clearInterval(interValId); 8 } 9 }

理解与使用Javascript中的回调函数 -2

在javascript中回调函数非常重要,它们几乎无处不在.像其他更加传统的编程语言都有回调函数概念,但是非常奇怪的是,完完整整谈论回调函数的在线教程比较少,倒是有一堆关于call()和apply()函数的,或者有一些简短的关于callback的使用示例. 函数也是对象 想弄明白回调函数,首先的清楚地明白函数的规则.在javascript中,函数是比较奇怪的,但它确确实实是对象.确切地说,函数是用 Function()构造函数创建的Function对象.Function对象包含一个字符串,字符串

理解和使用 JavaScript 中的回调函数

原文:http://javascriptissexy.com/ 在JavaScrip中,function是内置的类对象,也就是说它是一种类型的对象,可以和其它String.Array.Number.Object类的对象一样用于内置对象的管理.因为function实际上是一种对象,它可以"存储在变量中,通过参数传递给(别一个)函数(function),在函数内部创建,从函数中返回结果值". 因为function是内置对象,我们可以将它作为参数传递给另一个函数,延迟到函数中执行,甚至执行后

Javascript中的回调函数和匿名函数的回调

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> /* * 匿名函数自调的意义: 1.营造了一个封闭的空间 2.防止变量冲突 3.有选择性的对外开发(第三方框架都是对js这样封装的) */ //===

【JavaScript】理解与使用Javascript中的回调函数

在Javascript中,函数是第一类对象,这意味着函数可以像对象一样按照第一类管理被使用.既然函数实际上是对象:它们能被“存储”在变量中,能作为函数参数被传递,能在函数中被创建,能从函数中返回. 因为函数是第一类对象,我们可以在Javascript使用回调函数.在下面的文章中,我们将学到关于回调函数的方方面面.回调函数可能是在Javascript中使用最多的函数式编程技巧,虽然在字面上看起来它们一直一小段Javascript或者jQuery代码,但是对于许多开发者来说它任然是一个谜.在阅读本文

理解与使用Javascript中的回调函数

在Javascript中,函数是第一类对象,这意味着函数可以像对象一样按照第一类管理被使用.既然函数实际上是对象:它们能被“存储”在变量中,能作为函数参数被传递,能在函数中被创建,能从函数中返回. 因为函数是第一类对象,我们可以在Javascript使用回调函数.在下面的文章中,我们将学到关于回调函数的方方面面.回调函数可能是在 Javascript中使用最多的函数式编程技巧,虽然在字面上看起来它们一直一小段Javascript或者jQuery代码,但是对于许多开发者来说 它任然是一个谜.在阅读

Javascript 中的回调函数和递归函数简单实际分析学习

Javascript 中的回调函数和递归函数简单实际分析学习 1 回调函数 所谓回调函数简单理解就是将一个函数做为参数传递给其他的函数供其使用.(只是在js中,因为其它的语言中有指针这个概念). 举一个简单的例子,当我们在统计账单的时候就要整理材料这些,然后就需要计算器,计算器我们想象成为一个可以实现计算的函数.统计账单是另外的另一个函数,当统计账单的时候就会需要计算器这个函数的支持,其实这就是一个简单的回调.可以按这个理解. 下来我借用网上的一个例子: //先定义一个函数fun1 functi

javascript痛点之四回调函数

先来看看什么是回调函数(callback) 回调函数就是调用函数的时候将另一个函数的名称当作参数传递进去,并且在函数体中进行调用. function study(){ console.log("studying..."); } function play(){ console.log("playing..."); } function sleep(){ console.log("sleeping...."); } function doWhat(