JavaScript中的回调函数是什么及如何用
今天小编给大家分享一下JavaScript中的回调函数是什么及如何用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都做网站、网站制作、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的壶关网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!
1.什么是回调函数(callback)呢?
把函数当作一个参数传到另外一个函数中,当需要用这个函数是,再回调运行()这个函数.
回调函数是一段可执行的代码段,它作为一个参数传递给其他的代码,其作用是在需要的时候方便调用这段(回调函数)代码。(作为参数传递到另外一个函数中,这个作为参数的函数就是回调函数)
理解:函数可以作为一个参数传递到另外一个函数中。
分析:add(1, 2, print);中,函数print作为一个参数传入到add函数中,但并不是马上起作用,而是var sum = num1 + num2;运行完之后需要打印输出sum的时候才会调用这个函数。(这个作为参数传递到另外一个函数中,这个作为参数的函数就是回调函数.
匿名回调函数:
2.回调函数有哪些特点?
1.不会立即执行
回调函数作为参数传递给一个函数的时候,传递的只是函数的定义并不会立即执行。和普通的函数一样,回调函数在调用函数数中也要通过()
运算符调用才会执行。
2.回调函数是一个闭包
回调函数是一个闭包,也就是说它能访问到其外层定义的变量。
3.执行前类型判断
在执行回调函数前最好确认其是一个函数。
3.回调函数中this的指向问题
注意在回调函数调用时this的执行上下文并不是回调函数定义时的那个上下文,而是调用它的函数所在的上下文。
举例:
分析:this指向是 离它最近的或者嵌套级别的 function/方法的调用者,这里离它最近的function是
function(n),会回到上面的callback()中,这时候调用者就不是obj而是window。
解决回调函数this指向的方法1:箭头函数
回调函数(若回调函数是普通函数时)当参数传入另外的函数时,若不知道这个函数内部怎么调用回调函数,就会出现回调函数中的this指向不明确的问题(就比如上面例子中this指向的不是obj而是window)。所以 把箭头函数当回调函数,然后作为参数传入另外的函数中就不会出现this指向不明的问题。
分析:回调函数用箭头函数写之后,this指向很明确,就是 离它最近的或者嵌套级别的 function/方法的调用者,所以这里是 obj 。
解决回调函数this指向的方法2:var self = this;
4.为什么要用到回调函数?
有一个非常重要的原因 —— JavaScript 是事件驱动的语言。这意味着,JavaScript 不会因为要等待一个响应而停止当前运行,而是在监听其他事件时继续执行。来看一个基本的例子:
分析:正如你所料,
first
函数首先被执行,随后second
被执行 —— 控制台输出:1 2
但如果函数 first
包含某种不能立即执行的代码会如何呢?例如我们必须发送请求然后等待响应的 API 请求?为了模拟这种状况,我们将使用 setTimeout
,它是一个在一段时间之后调用函数的 JavaScript 函数。我们将函数延迟 500 毫秒来模拟一个 API 请求,新代码长这样:
分析:这里 function(){console.log(1)}函数当作一个参数传入setTimeout函数中,因为setTimeout是官方提供得一个函数,里面有很多复杂的业务程序,所以函数 function(){console.log(1)}传入后,不一定马上运行,要setTimeout里面要运行到function(){console.log(1)}时才会运行该函数参数,那是不是整个程序就一直等setTimeout运行?不是的!!!
整个程序运行结果为: 2 1 ,并不是原先的1 2 .即使我们首先调用了 first()
函数,我们记录的输出结果却在 second()
函数之后。
这不是 JavaScript 没有按照我们想要的顺序执行函数的问题,而是 JavaScript 在继续向下执行 second()
之前没有等待 first()
响应的问题。回调正是确保一段代码执行完毕之后再执行另一段代码的方式。
5.回调函数和异步操作的关系是什么?回调函数是异步么?
定义:回调函数被认为是一种高级函数,一种被作为参数传递给另一个函数的高级函数。回调函数的本质是一种模式(一种解决常见问题的模式),因此回调函数也被称为回调模式。
简而言之:一个函数在另一个函数中被调用。而且可以当参数传给其他函数。
所以: 回调函数和异步操作的关系是没有关系!!!
那为什么很多的异步操作都有回填函数啊??
问:你所知道的异步操作,是回调的作用么??? 并不是。
回调:更多的可以理解为一种业务逻辑把 异步编程:JS代码的执行顺序
简单理解:callback 顾名思义 打电话回来的意思
eg1:你点外卖,刚好你要吃的食物没有了,于是你在店老板那里留下了你的电话,过了几天店里有了,店员就打了你的电话,然后你接到电话后就跑到店里买了。在这个例子里,你的电话号码就叫回调函数,你把电话留给店员就叫登记回调函数,店里后来有货了叫做触发了回调关联的事件,店员给你打电话叫做调用回调函数,你到店里去取货叫做响应回调事件。
eg2:再比如,你发送一个axios 请求,请求成功之后,触发成功的回调函数,请求失败触发失败的回调函数。这里面的回调函数更像是一个工具,后台通过这个工具告诉你,你成功了抑或是失败了。这里面的所有异步操作都和回调没关系,真正的异步是then方法。
以上就是“JavaScript中的回调函数是什么及如何用”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注创新互联行业资讯频道。
标题名称:JavaScript中的回调函数是什么及如何用
文章来源:http://ybzwz.com/article/pghgdo.html