1. 回调函数定义

不是说这个函数有什么特别之处，只是被当做参数使用了而已。（一个函数作为一个参数传到另一个函数中）

回调函数是你定义的，但你不能主动调用，结果它却执行了。

三句话概括：

1. 自己定义的函数
2. 自己没有调用
3. 函数自己执行了

let btn = document.querySelector('button');
function fn(){consloe.log('点击了')；
}
btn.addEventListener('click',fn);
//不是fn()，虽然不知道addEventListener函数内部是怎么样的，但内部一定调用了fn，fn即为回调函数//等同于：
btn.addEventListener('click',()=>{consloe.log('点击了')
})

function add(n1,n2,callback){var sum = n1 + n2;callback(sum)
}
function print(res){consloe.log(res);
}
//print即为回调函数
add(1,2,print) //3

//吃饭前打印洗手
function eat(callback){callback();console.log('吃饭');
}
function wash(){ //wash就是回调函数console.log('洗手~~~');
}
eat(wash)

2. 为什么需要回调函数

有一个非常重要的原因 —— JavaScript 是事件驱动的语言。

这意味着，JavaScript 不会因为要等待一个响应而停止当前运行，而是在监听其他事件时继续执行。来看一个基本的例子：

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

分析：正如你所料，first 函数首先被执行，随后 second 被执行 —— 控制台输出:1 2

但如果函数 first 包含某种不能立即执行的代码会如何呢？例如我们必须发送请求然后等待响应的 API 请求？为了模拟这种状况，我们将使用 setTimeout，它是一个在一段时间之后调用函数的JS函数。我们将函数延迟 500 毫秒来模拟一个 API 请求，新代码长这样：

function first() {// 模拟代码延迟setTimeout(function () {  //所以function(){console.log(1)}是回调函数console.log(1);}, 500);
}
function second() {console.log(2);
}
first();
second();

分析：这里function(){console.log(1)}函数当作一个参数传入setTimeout函数中，因为setTimeout是官方提供得一个函数，里面有很多复杂的业务程序，所以函数function(){console.log(1)}传入后，不一定马上运行，要setTimeout里面要运行到function(){console.log(1)}时才会运行该函数参数，那是不是整个程序就一直等setTimeout运行？不是的！！！

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

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

3. 回调函数与异步编程

回调函数：是一种作为参数传递给另一个函数的高级函数

异步编程：JS代码的执行顺序

3.1 回调函数的使用场景：

1. 异步编程。
2. 事件监听、处理。
3. setTimeout、setInterval方法。
4. 通用功能，简化逻辑。

3.2 异步编程的4种方法

1. 回调函数。
2. 事件监听。
3. 发布订阅。
4. Promise对象。

3.3 回调函数有异步和同步之分

同步回调：

function a() {console.log('a')
}
function b(func) {console.log('b')func
}
b(a)

异步任务必须指定回调函数，当主线程开始执行异步任务，就是执行对应的回调函数。

4. 回调函数中this的指向问题

回调函数中的this默认是指向window的，因为本质上是在函数内callback,并没有.前的对象调用

4.1 解决1：使用箭头函数**

箭头函数中的 this:

• 函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象。
• this 指向的固定化，并不是因为箭头函数内部有绑定 this 的机制，实际原因是箭头函数根本没有自己的 this，导致内部的 this 就是外层代码块的 this。正是因为它没有 this，所以也就不能用作构造函数。

4.2 解决2：使用bind永久绑定this

详情见下一贴：this的指向问题