js回调函数

1.什么是回调函数

首先通俗来讲，回调函数表示一整个函数当作一个参数传入其他函数当中，在需要的时候便会调用这个段函数代码。

举个非常简单的例子：

function add(a,b,callback){
    var sum=a+b
    console.log(callback(sum));
}       //将一个函数当作一个参数传入函数当中
function print(a,b){
    console.log(a+b);
}       //定义一个函数
add(10,11,print)    //开始运行函数

 匿名回调函数：

function add(a,b,callback){
    var sum=a+b
    console.log(callback(sum));
}
add(1,2,function print(sum){
    console.log(sum);
})

2.回调函数由那些特点：

A.不会立即执行，因为例如前面的匿名回调函数，其一定要等到sum的值运算出来的时候，才可以进行函数的调用。

B.回调函数是一个闭包

也就是其能访问到其外层定义的变量

C.执行前类型判断

最好在调用回调函数的时候，使用typeof判断其是否是一个函数

function add(a,b,callback){
    var sum=a+b
    if(typeof callback==='function')  //判断其是否是函数
    {
        console.log(callback(sum));
    }
}
add(1,2,function print(sum){
    console.log(sum);
})

3.回调函数的this指向问题：

注意点：this指向是 离它最近的或者嵌套级别的 function/方法的调用者

在回调函数当中，先去最近的嵌套的function方法，像下面这个就是找到最近的function(n){ }，然后回到add(callback){  }当中，所以最后就是返回的this就是window

function add(callback){
    callback()
}
var obj={
    data:100,
    fun:function(){
        add(function(n){
            console.log(this);  
        })
    }
}

那如何解决this的指向问题呢，我们提供了两种办法：
A.箭头函数

因为在这里没有function嵌套，所以直接指向obj这个对象

function add(callback){
    callback()
}
var obj={
    data:100,
    fun:function(){
        add((n)=>{
            console.log(this);
        })
    }
}

B.var self=this

function add(callback){
    callback()
}
var obj={
    data:100,
    fun:function(){
        var self=this
        add(function(n){
            console.log(self);
        })
    }
}

4.回调函数的作用：确保一段代码执行完毕之后再执行另一段代码的方式。

JavaScript 是事件驱动的语言。这意味着，JavaScript 不会因为要等待一个响应而停止当前运行，而是在监听其他事件时继续执行

A.先举例不使用回调函数的情况：

function first(){
    console.log(1);
}
function second(){
    console.log(2);
}
first()
second()

这时候控制台输出1,2

B.再来看一个使用回调函数的基本例子：

function first(){
    setTimeout(function(){
        console.log(1);
    },500)
}
function second(){
    console.log(2);
}
first()
second()

整个程序运行结果为: 2  1 ,并不是原先的1 2 .即使我们首先调用了 first() 函数，我们记录的输出结果却在 second() 函数之后。

这不是 JavaScript 没有按照我们想要的顺序执行函数的问题，而是 JavaScript 在继续向下执行 second() 之前没有等待 first() 响应的问题。也就是我们前面所说的回调函数的作用:确保一段代码执行完毕之后再执行另一段代码的方式。