我翻译了一篇文章---JS回调函数

168 阅读4分钟

这是一篇昨天推特上看到的文章,今天想特地翻译一下,是关于回调函数的。

原文链接:callback function

回调函数

我们所拥有的最美妙的体验就是神秘感 ----- 爱因斯坦

如果你不知道什么是回调函数,那么今天就是你的幸运日!在今天的文章中我们将讨论回调函数的含义,老实说,如果你已经使用JavaScript编码了有一段时间了,你很有可能已经实现了一些形式的回调。我们将会假设你已经有了一些基础的知识关于JavaScript是怎样工作的以及函数是怎样开始的。如果没有的话,请在进入本文主题前查看 function mdn docs,相信它会帮助你了解跟多的。

内容

  1. 介绍
  2. 回调函数
  3. 深度回调
  4. 结论

介绍

为什么我们要知道回调函数是干什么的?好吧,首先,回调函数基本上就是函数,唯一的区别就是回调函数是通过参数的形式传递给函数的,也是就参数。在JavaScript中,这种将函数传递给另一个函数的观念非常普遍,我很确信,你已经使用了一些回调函数,甚至你自己还不知道,这就意味着JavaScript函数就像其他类型一样(布尔,字符串,数子),并且可以像参数一样很容易的传递。

让我们来看看第一个回调函数的例子,我们将一行一行的深入了解它。

const functionFeeder = function(callback){
    callback('Inside of functionFedder')
}

我们定义了一个叫functionFeeder的变量,在这个functionFeeder函数里面,我们定义了一个传入回调函数作为参数的函数,我们传入回调参数的原因是当我们调用funcitionFeeder时,可以在参数中传递函数。

functionFeeder() //invoke function

当我们调用了一个函数时我们希望它去执行,在某些突发情况下我们想这样去传递我们的回调函数。

functionFeeder(()=>{}) //pass in a function

接下来,我们想在我们的回调函数中输入字符串,我们可以通过很多的办法去实现,但是现在让我们用alert()方法来输出我们的字符串。

functionFeeder((string)=> {alert(string)}) //alert function pops up

除非你在自己心中接受了现在,否则失败就不是失败 -----李小龙

那么这是怎么回事?这就是回调函数,我们的functionFeeder变成了一个**回调函数,**或者换句话说就是一个高阶函数。允许它接受一个函数作为参数并在其参数内调用函数时执行一个函数。

深度回调

让我们看另一个例子。让我们做一个简单的输出函数,它将输出一个字符串名字。

function printName(name){ // has one task
    console.log(`Hello ${name}`) // outputs log
}

我们定义了一个简单的函数,该函数输出带有通过参数传递的名称的字符串。现在,对于我们的回调函数,我们将传递我们的printName函数。

function helloOscar(callback){
    const fullName = 'Oscar';
    callback(fullName);
}
helloOscar(printName) //这个是我加的,我个人是这么理解的

现在,当我们调用helloOscar()并随后执行printName作为回调时,我们通过此函数传递的回调将成为我们的printName函数。现在,我们现在可以在另一个上下文中重用printName

那有意义吗?希望如此。刚开始时有点混乱,但是一旦您开始弄混回调函数,您甚至甚至都不记得是什么时候第一次尝试使用它们了。

结论

我希望到本文结束时,您能够学习如何创建和理解每行代码中正在发生的事情。了解您的代码如何完全起作用非常重要,它不仅可以帮助您成为更好的开发人员,而且可以帮助您更高效地使用正在使用的工具。

这些文章主要供个人使用,以成为更好的程序员,作家和发展我的编程技能。随意发表您认为应该对我和其他人有帮助的任何反馈或更正。感谢您抽出宝贵的时间坚持到这里!

翻译完。

如有错误,还请评论区留言,让我及时更正。