JavaScript回调函数

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

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

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

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

1、 不会立即执行

2、 闭包

3、 This指向

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

$('#test').click(function () { console.log('回调执行'); });

我不知道有没有人这样写过：

$('#test').click(function () { console.log('回调执行'); }());

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

上面的是匿名函数回调，函数回调是这样的：

$('#test').click(callback);

function callback() {
    console.log('回调执行');
}
复制代码

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

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

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指向：

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);
复制代码

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

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

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

回调：

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);
复制代码

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

fun(1, 2, function (data) {
    //执行不同结果

});

fun(5, 6, function (data) {
    //执行不同结果

});
复制代码

如果不用回调：

fun(1, 2);

fun(5, 6);
复制代码

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

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

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

欢迎关注Coding个人笔记 公众号

转载于:https://juejin.im/post/5c52c0e6f265da2da00e82eb