彻底理解JavaScript中回调函数 (推荐)

在javascript中回调函数非常重要,它们几乎无处不在。像其他更加传统的编程语言都有回调函数概念,但是非常奇怪的是,完完整整谈论回调函数的在线教程比较少,倒是有一堆关于call()和apply()函数的,或者有一些简短的关于callback的使用示例。
首先你得先明白一点:

函数也是对象

 想弄明白回调函数,首先的清楚地明白函数的规则。先来看个例子:

//可以这样创建函数
var fn = new Function("arg1", "arg2", "return arg1 * arg2;");
fn(2, 3);   //6

 这样做的一个好处,可以传递代码给其他函数,也可以传递正则变量或者对象(因为代码字面上只是对象而已)。
在javascript中,函数是比较奇怪的,但它确确实实是对象。确切地说,函数是用Function()构造函数创建的Function对象。Function对象包含一个字符串,字符串包含函数的javascript代码。

理解了函数也是对象,先不急聊回调函数,先看看下面代码:

function say (value) {
    alert(value);
}
alert(say);
alert(say('hi js.'));

只写变量名 say 返回的将会是 say方法本身,以字符串的形式表现出来。
而在变量名后加()如say()返回的就会使say方法调用后的结果,这里是弹出value的值。

js中函数可以作为参数传递

再看下面两段代码:

function say (value) {
    alert(value);
}
function execute (someFunction, value) {
    someFunction(value);
}
execute(say, 'hi js.');

function execute (someFunction, value) {
    someFunction(value);
}
execute(function(value){alert(value);}, 'hi js.');

上面第一段代码是将say方法作为参数传递给execute方法
第二段代码则是直接将匿名函数作为参数传递给execute方法

实际上:

function say (value) {
    alert(value);
}
// 注意看下面,直接写say方法的方法名与下面的匿名函数可以认为是一个东西
// 这样再看上面两段代码是不是对函数可以作为参数传递就更加清晰了
say;

function (value) {
    alert(value);
}

这里的say或者匿名函数就被称为回调函数!

如果还不懂,看看下面并不是很完美的比喻:
你到一个商店买东西,刚好你要的东西没有货,于是你在店员那里留下了你的电话,过了几天店里有货了,店员就打了你的电话,然后你接到电话后就到店里去取了货。在这个例子里,你的电话号码就叫回调函数,你把电话留给店员就叫登记回调函数,店里后来有货了叫做触发了回调关联的事件,店员给你打电话叫做调用回调函数,你到店里去取货叫做响应回调事件。
clipboard.png

回调函数容易混淆点——传参

两种回调函数传参的方法:

  • 将回调函数的参数作为与回调函数同等级的参数进行传递

clipboard.png

  • 回调函数的参数在调用回调函数内部创建

clipboard.png


希望我对回调函数的一点点小总结能对大家有帮助,
关于回调函数还有什么问题可以在下面留言,一起交流。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript回调函数是一种常见的编程模式,用于处理异步操作和事件处理。回调函数是作为参数传递给其他函数,并在特定事件发生或异步操作完成时被调用。 以下是使用回调函数的示例: ```javascript function fetchData(callback) { // 模拟异步操作 setTimeout(function() { var data = "这是异步操作返回的数据"; callback(data); // 调用回调函数并传递数据 }, 1000); } function process(data) { console.log("处理数据:" + data);} fetchData(process); ``` 在上述示例,`fetchData`函数模拟了一个异步操作,通过`setTimeout`延迟1秒钟后返回数据。在`fetchData`函数内部,我们调用了传递给它的回调函数,并将数据作为参数传递给回调函数。 `process`函数是一个回调函数,在数据返回后被调用,并对数据进行处理。在这个例子,我们将返回的数据打印到控制台上。 回调函数还可以用于处理事件: ```javascript var button = document.getElementById("myButton"); function handleClick() { console.log("按钮被点击"); } button.addEventListener("click", handleClick); ``` 在上述示例,我们给id为"myButton"的按钮添加了一个点击事件的监听器。当按钮被点击时,回调函数`handleClick`会被调用。 回调函数是一种强大的工具,可以使代码更具灵活性和可扩展性。通过将函数作为参数传递,我们可以在特定事件发生或异步操作完成后执行特定的逻辑。这种模式在处理异步请求、事件处理、定时器等方面非常常见和有用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值