当前位置: 首页 > 科技观察

深入理解JavaScript回调函数

时间:2023-03-20 01:18:43 科技观察

JavaScript回调函数是一个重要的概念,要想成为一名成功的JavaScript开发人员,必须理解它。但我相信看完这篇文章后,您将能够克服在使用回调方法之前遇到的所有障碍。在我们开始之前,让我们首先确保我们对函数的理解是扎实的。快速回顾:JavaScript函数什么是函数?函数是一种逻辑结构,其中包含一组代码以执行特定任务。事实上,函数允许以更有条理的方式编写代码,以便于调试和维护。函数还允许代码重用。您无需一遍又一遍地编写相同的代码,只需定义一个函数并在需要时调用它。声明一个函数现在,让我们看看如何在javascript中声明一个函数。使用函数的构造函数:在这种方法中,函数是在“函数”的构造函数的帮助下创建的。从技术上讲,这种方法的效率不如使用函数表达式语法和函数声明语句语法来声明函数。使用函数表达式:通常这种方法与变量赋值相同。简而言之,函数体被视为一个表达式,并将该表达式分配给一个变量。使用此语法定义的函数可以命名为函数或匿名函数。没有名字的函数称为匿名函数。匿名函数是自调用的,这意味着它会自动调用自己。此行为也称为立即调用的函数表达式(IIFE)。使用函数声明:这种方法是JavaScript中常用的老派方法。在关键字“function”之后,您必须指定函数的名称。之后,如果该函数接受多个参数或自变量,则也需要提及它们。虽然这部分是完全可选的。在函数体中,函数必须返回一个值给调用者。遇到return语句后,函数就会停止执行。在函数内部,参数将充当局部变量。同样,在函数内部声明的变量是该函数的局部变量。局部变量只能在该函数内访问,因此具有相同名称的变量可以很容易地在不同的函数中使用。调用函数前面声明的函数在以下任何一种情况下都会被调用:当一个事件发生时,例如,用户单击一个按钮,或者用户从下拉列表中选择某个选项等。javascript代码。该函数可以自动调用,我们已经在匿名函数表达式中讨论过了。()运算符调用函数。然后,您想在Users中获取名为John的人的详细信息。要在回调的帮助下实现此功能,代码应如下所示:http.get('https://api.github.com/users',function(users){/*Displayallusers*/console.log(users);http.get('https://api.github.com/repos/javascript/contributors?q=contributions&order=desc',function(contributors){/*Displayalltopcontributors*/console.log(contributors);http.get('https://api.github.com/users/Jhon',function(userData){/*Displayuserwithusername'Jhon'*/console.log(userData);});});});从上面的代码片段可以看出,代码变得更难理解,也更难维护和修改。这是由回调函数的嵌套引起的。如何避免回调地狱?可以使用多种技术来避免回调地狱,如下所示。使用promises使用async-await使用async.js库使用Async.js库让我们谈谈如何使用async.js库避免回调地狱。根据async.js官网的描述:Async是一个工具模块,提供了直接而强大的功能来使用异步JavaScript。Async.js总共提供了大约70个函数。现在,我们只讨论其中的两个,async.waterfall()和async.series()。async.waterfall()当你想一个接一个地运行一些任务,然后将前一个任务的结果传递给下一个任务时,这个函数很有用。它需要一个函数数组“任务”和一个最终的“回调”函数,该函数将在“任务”数组中的所有函数完成后或在使用错误对象调用“回调”之后调用。varasync=require('async');async.waterfall([function(callback){/*这里,第一个参数值为null,它表示下一个函数将从函数数组中执行。如果值为真或任何字符串,则最终回调函数将被执行,数组中的其他剩余函数将不会被执行。*/callback(null,'one','two');},function(param1,param2,callback){//param1nowequals'one'andparam2nowequals'two'callback(null,'three');},function(param1,callback){//param1nowequals'three'callback(null,'done');}],function(err,result){/*Thisisthefinalcallbackfunction.resultnowequals'done'*/});async.series()当你想运行一个函数然后需要在所有函数都成功执行后获取结果时很有用。async.waterfall()和async.series()之间的主要区别在于async.series()不会将数据从一个函数传递到另一个函数。async.series([function(callback){//dosomestuff...callback(null,'one');},function(callback){//dosomemorestuff...callback(null,'two');}],//optionalcallbackfunction(err,results){//resultsnowequalto['one','two']});Javascript回调和闭包闭包在技术术语中,闭包是捆绑在一起的函数组,引用其周围环境的状态。简而言之,闭包允许从内部函数访问外部函数的范围。要使用闭包,我们需要在另一个函数中定义一个函数。然后,我们需要将其返回或传递给另一个函数。回调从概念上讲,回调类似于闭包。回调基本上是将一个函数用作另一个函数。最后的话我希望这篇文章消除了您对javascript回调函数的所有疑虑。如果您觉得这篇文章有帮助,请与他人分享。