前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >JavaScript回调函数

JavaScript回调函数

作者头像
wade
发布于 2020-04-23 09:19:07
发布于 2020-04-23 09:19:07
1.7K00
代码可运行
举报
文章被收录于专栏:coding个人笔记coding个人笔记
运行总次数:0
代码可运行

JavaScript的回调函数大概是JavaScript中使用最广泛的函数编程技术了,我们几乎可以在任何脚本中看到它的身影。

回调函数也被叫做高阶函数,所谓高阶函数是指函数作为参数被传递或者函数作为返回值输出,简单点说就是操作函数的函数叫做高阶函数。我们把一段可执行的代码(一个函数)作为参数传递给其他的代码(另一个函数),并在需要的时候方便调用这个可执行代码(回调函数)。

这样解释感觉有点拗口,简单说就是把一个函数当做参数传递给另外的函数,然后在这个函数内部执行这个参数的函数。回调函数有两种,一种是函数回调,一种是匿名函数回调。

回调函数有几个需要注意的点:

1、 不会立即执行

2、 闭包

3、 This指向

先来看一下jQuery最经典的回调:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$('#test').click(function () {
    console.log('回调执行');
});
我不知道有没有人这样写过:
$('#test').click(function () {
    console.log('回调执行');
}());

把回调的函数变成自执行,函数会直接输出,所以回调函数有个特点就是不会立即执行,一般是在需要执行的时候去调用,才会执行。之前也写过闭包,我查了很多,都说回调是闭包的简单使用,能访问外层定义的变量。

上面的是匿名函数回调,函数回调是这样的:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$('#test').click(callback);

function callback() {
    console.log('回调执行');
}

其实两种并没有本质上的区别。

回调函数的this指向需要特别注意:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var sum = 100;
var obj = {
    sum: 10,
    fun: function () {
        console.log(this.sum);
    }
};
function con(callback) {
    callback(obj);
}
con(obj.fun);

比如这段代码,当我们直接调用obj.fun();输出的是10,当我们把这个方法当做参数传递给con方法之后,调用callback的是window,this指向window,所以输出的是100。

当然我们可以用call或者apply和bind来改变this指向:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var sum = 100;
var obj = {
    sum: 10,
    fun: function () {
        console.log(this.sum);
    }
};
function con(callback) {
    callback.apply(obj);
    callback.call(obj);
    callback.bind(obj)();
}
con(obj.fun);

上面的代码都太简单,没办法感觉回调的好处,甚至有些觉得不把函数当做参数传入,直接调用这个函数也可以做到。

回调函数可以避免重复代码、加强代码可维护性、可读性,一般用在异步编程、事件监听处理、定时器计时器等。

然后我们来说一下为什么感觉回调函数没什么用,那是因为回调函数分为异步回调和同步回调。对于同步的回调,确实,跟普通调用函数一样,但是在一些场景下特别有用,比如:

回调:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function fun(num1, num2, callback) {
    var result = null;
    //几百几千的逻辑代码
    callback(result);
}
fun(1, 2, function (data) {
    console.log(data);
});
不用回调:
function fun(num1, num2) {
    var result = null;
    //几百几千的逻辑代码
    res(result);
}
function res(result){

}
fun(1, 2);

咋一看,两者差不多,但是如果涉及到更多的逻辑呢,我传入两个参数,要通过获得的结果去采用不同方法,采用回调我只需要一个方法:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
fun(1, 2, function (data) {
 //执行不同结果
});
fun(5, 6, function (data) {
 //执行不同结果
});
如果不用回调:
fun(1, 2);
fun(5, 6);

然后各种对result的判断都要写在res方法里面。或者判断之后调用外部的方法。

异步回调就更有用了,最典型的就是ajax的异步回调,包括封装ajax。

关于回调我也不知道解释的能不能让人明白,也不知道是不是正确,都是个人理解,有问题欢迎指教。

(完)

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2018-08-20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 coding个人笔记 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
JavaScript-回调函数
In computer programming, a callback is a piece of executable code that is passed as an argument to other code, which is expected to call back (execute) the argument at some convenient time
小小工匠
2021/08/16
9800
一篇文章把你带入到JavaScript中的闭包与高级函数
在JavaScript中,函数是一等公民。JavaScript是一门面向对象的编程语言,但是同时也有很多函数式编程的特性,如Lambda表达式,闭包,高阶函数等,函数式编程时一种编程范式。
达达前端
2019/11/19
8170
一篇文章把你带入到JavaScript中的闭包与高级函数
JavaScript 设计模式学习第三篇- 闭包与高阶函数
JavaScript 的函数也是对象,可以有属性,可以赋值给一个变量,可以放在数组里作为元素,可以作为其他对象的属性,什么都可以做,别的对象能做的它能做,别的对象不能做的它也能做,这不就是一等公民的地位嘛。 — 程墨 Morgan
越陌度阡
2020/11/26
3650
JavaScript设计模式--前奏
设计模式应遵守的原则: (1)最少知识原则:一个软件实体应当尽可能少地与其他实体发生相互作用(把对象划分成较小的粒度,以便提高复用性) (2)开放-封闭原则:软件实体(类、模块、函数)等应该是可以扩展的,但是不可修改。
奋飛
2019/08/15
3960
分享一些 JavaScript 函数概念相关的面试题
在编程中,函数是执行特定任务的可重用代码块。函数可以接受输入(称为参数)并返回结果。
前端达人
2024/06/14
1280
分享一些 JavaScript 函数概念相关的面试题
JavaScript 高级应用(第二弹)
用来修改 this 指向的,如果默认值为 null 或者 undefined 的,那么 this 的值就会指向 window(游览器环境下)
Gorit
2022/01/25
6630
JavaScript 高级应用(第二弹)
写JavaScript函数不得不知的高级技巧
对于我们程序员来说,写函数是再熟悉不过的事情了,不管我们要实现什么样的功能,都需要通过函数来完成。在JavaScript里面,函数拥有非常高的特权,甚至是一等公民,因此也跟Kotlin一样支持多种编程范式。
写代码的阿宗
2020/10/22
6431
写JavaScript函数不得不知的高级技巧
一文带你了解JavaScript函数式编程?
函数式编程在前端已经成为了一个非常热门的话题。在最近几年里,我们看到非常多的应用程序代码库里大量使用着函数式编程思想。
猿哥
2019/08/09
5880
一文带你了解JavaScript函数式编程?
JavaScript进阶之路系列(一): 高阶函数
看了这篇文章,你就会高阶函数了,是不是听起来很牛?高阶函数,听起来很高级,其实是很接地气,大家经常会用到的东西,比如filter,map,回调函数。
刘亦枫
2020/04/09
8730
深入探讨JavaScript函数
JavaScript是一门多范式的编程语言,其中函数是其核心特性之一。函数在JavaScript中起到至关重要的作用,不仅可以实现模块化的代码结构,还可以用于处理数据、控制流程、创建对象,以及执行各种任务。本文将深入探讨JavaScript函数的各个方面,包括函数的定义、参数传递、作用域、闭包、回调函数等,以帮助您更好地理解和利用JavaScript中的函数。
海拥
2023/10/15
3501
关于JavaScript中的回调看这篇就够了
回调函数是每个前端程序员都应该知道的概念之一。回调可用于数组、计时器函数、promise、事件处理中。
疯狂的技术宅
2021/01/13
1K0
【JS必知必会】高阶函数详解与实战
当大家看到这个面试题的时候,能否在第一时间想到使用高阶函数实现?想到在实际项目开发过程中,用到哪些高级函数?有没有想过自己创造一个高阶函数呢?开始本篇文章的学习
coder_koala
2019/07/30
8070
【译】JavaScript中的Callbacks
你是否遇到过"callbacks"一词,但是不知道这意味着什么?别着急。你不是一个人。许多JavaScript的新手发现回调也很难理解。
Jimmy_is_jimmy
2019/07/31
9760
JavaScript中的Callbacks
你是否遇到过"callbacks"一词,但是不知道这意味着什么?别着急。你不是一个人。许多JavaScript的新手发现回调也很难理解。
Jimmy_is_jimmy
2023/05/24
5890
JavaScript中的Callbacks
JavaScript 模式》读书笔记(4)— 函数2
  请注意introduceBugs()作为参数传递给writeCode()时是不带括号的。括号表示要执行函数,而在这种情况下,我们仅需要传递该函数的应用,而让writeCode()在适当的时候来执行它(也就是说,返回以后调用)。
zaking
2020/03/27
4050
一文带你了解JavaScript 函数式编程
函数式编程在前端已经成为了一个非常热门的话题。在最近几年里,我们看到非常多的应用程序代码库里大量使用着函数式编程思想。
心莱科技雪雁
2019/08/23
1.1K0
一文带你了解JavaScript 函数式编程
Node.js 回调函数的原理、使用方法
在 Node.js 中,回调函数是一种常见的异步编程模式。它允许你在某个操作完成后执行特定的代码。回调函数在处理 I/O 操作、事件处理和异步任务时非常常见。本文将详细介绍 Node.js 回调函数的原理、使用方法和一些常见问题。
网络技术联盟站
2023/07/07
7590
JavaScript基础——回调(callback)是什么
上篇文章《JavaScript基础——你真的了解JavaScript吗?》,我们明白了JavaScript是一个单线程、非阻塞、异步、解释性语言,清楚了什么是单线程、进程、阻塞、调用堆栈、异步回调、任
前端达人
2018/12/02
1.7K0
JavaScript基础——回调(callback)是什么
深入理解 JavaScript 回调函数 [每日前端夜话0xDF]
JavaScript 回调函数是成为一名成功的 JavaScript 开发人员必须要了解的一个重要概念。但是我相信,在阅读本文之后,你将能够克服以前使用回调方法遇到的所有障碍。
疯狂的技术宅
2019/11/14
1.8K0
闭包与高阶函数
闭包(closure)指有权访问另一个函数作用域中变量的函数。简单理解就是 ,一个作用域可以访问另外一个函数内部的局部变量。
梨涡浅笑
2020/10/27
3660
相关推荐
JavaScript-回调函数
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验