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

JavaScript回调函数

作者头像
wade
发布2020-04-23 17:19:07
1.5K0
发布2020-04-23 17:19:07
举报
文章被收录于专栏:coding个人笔记coding个人笔记

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

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

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

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

1、 不会立即执行

2、 闭包

3、 This指向

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

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

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

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

代码语言:javascript
复制
$('#test').click(callback);

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

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

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

代码语言:javascript
复制
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
复制
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
复制
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
复制
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 删除。

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档