JS07_回调函数与异步编程

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的指向问题