JS中this关键字，宏任务与微任务总结-CSDN博客

本文链接：https://blog.csdn.net/qq_52178594/article/details/132066854

JS中this关键字

this存在原因

var obj = (foo : 5)

在JavaScript的引擎中对象(foo : 5)的保存是现在内存里面生成一个对象(foo : 5)，然后把这个对象的内存地址赋值给OBJ，也就是说OBJ是一个地址。当需要读取这个对象是，引擎就会先拿到地址OBJ，然后在地址中·读出原始的对象并返回他的属性。

但是这里存在一个问题，原始的对象是以字典的形式保存的，属性值可能会是一个函数，类似于foo : function()这种时候JavaScript引擎就会先将函数function()单独保存在内存中，然后再将函数的地址赋值给foo属性的value属性，这就导致了function()函数不仅能在obj中被foo对象调用，还能单独调用。鉴于如此，如何确定函数调用的具体位置就成了一个难题，于是this就应运而生了，它的出现就是为了在函数体内部，指代函数当前的调用环境。

var f = function () {
  console.log(this.x);
}

var x = 1;
var obj = {
  f: f,
  x: 2,
};

// 单独执行
f() // 1

// obj 环境执行
obj.f() // 2

this指向

1、全局中的this：严格/非严格模式:指向window

this === window // true

function f() {
  console.log(this === window);
}
f() // true

2、直接执行函数中this：undefined window

3、回调函数中的this：undefined window

4、递归谁调用指向谁谁调用指向谁

5、当使用arguments 回调或者递归当前函数，
        回调函数中this指向回调当前函数上下文环境中的arguments
        递归函数中this指向递归当前函数arguments
        严格模式时，禁用arguments.callee 会报错

6、对象：对象属性中this。指向当前对象外上下文环境中this指向
方法中this是谁调用这个方法，this指向谁

var Obj = function (p) {
  this.p = p;
};

var o = new Obj('Hello World!');
o.p // "Hello World!"

7、事件中回调函数中this：谁侦听，就是谁

8、数组的部分回调方法
forEach map some every filter find findIndex lastFind lastFindIndex flatMap
都具备重新设置回调函数中this的指向，因此将会指向设置对象

9、箭头函数：箭头函数内的this指向为当前箭头函数外上下文环境中this的指向

10、call，apply，bind

        非严格模式时
                fn.call(1);//this指向对象1 所有数值，字符串，布尔值都会被转换为相对于的对象类型，然后this指向这个对象类型
                o.b.call(undefined);//this指向window 参数为undefined或者不填的时候this指向window
                o.b.call(null);//this指向window 参数为null的时候this指向window
                o.b();//this就是o

严格模式时
使用严格模式时，call，apply、bind调用带入什么参数时，this就指向这个参数

宏任务与微任务

一、什么是宏任务和微任务？

首先，我们要先了解下 Js 。js 是一种单线程语言，简单的说就是：只有一条通道，那么在任务多的情况下，就会出现拥挤的情况，这种情况下就产生了 ‘多线程’ ，但是这种“多线程”是通过单线程模仿的，也就是假的。那么就产生了同步任务和异步任务。

二、JS为什么要区分宏任务和微任务?

（1）js是单线程的，但是分同步异步；
（2）微任务和宏任务皆为异步任务，它们都属于一个队列；
（3）宏任务一般是：script、setTimeout、setInterval、postMessage、MessageChannel、setImmediate(Node.js 环境)；
（4）微任务：Promise.then、Object.observe、MutationObserver、process.nextTick(Node.js 环境)；
（5）先执行同步再执行异步，异步遇到微任务，先执行微任务，执行完后如果没有微任务，就执行下一个宏任务，如果有微任务，就按顺序一个一个执行微任务

三、宏任务、微任务有哪些？

宏任务一般是：script、setTimeout、setInterval、postMessage、MessageChannel、setImmediate(Node.js 环境)
微任务：Promise.then、Object.observe、MutationObserver、process.nextTick(Node.js 环境)

四、宏任务、微任务是怎么执行的？

执行顺序：先执行同步代码，遇到异步宏任务则将异步宏任务放入宏任务队列中，遇到异步微任务则将异步微任务放入微任务队列中，当所有同步代码执行完毕后，再将异步微任务从队列中调入主线程执行，微任务执行完毕后再将异步宏任务从队列中调入主线程执行，一直循环直至所有任务执行完毕。

这里容易产生一个**错误的**认识：就是微任务先于宏任务执行。实际上是先执行同步任务然后在执行异步任务，异步任务是分宏任务和微任务两种的。

五、案例

例一：

setTimeout(function(){
    console.log(1);
});
new Promise(function(resolve){            
    console.log(2);
    resolve();
}).then(function(){            
    console.log(3);
}).then(function(){
    console.log(4)
});         
console.log(5);
// 2 5 3 4 1

分析：
1. 遇到setTimout，异步宏任务，放入宏任务队列中
2. 遇到new Promise，new Promise在实例化的过程中所执行的代码都是同步进行的，所以输出2
3. Promise.then，异步微任务，将其放入微任务队列中
4. 遇到同步任务console.log(5);输出5；主线程中同步任务执行完
5. 从微任务队列中取出任务到主线程中，输出3、 4，微任务队列为空
6. 从宏任务队列中取出任务到主线程中，输出1，宏任务队列为空

例二：

setTimeout(()=>{
    new Promise(resolve =>{
        resolve();
    }).then(()=>{
        console.log('test');
    });
    console.log(4);
});
new Promise(resolve => {
    resolve();
    console.log(1)
}).then( () => {
    console.log(3);
    Promise.resolve().then(() => {
        console.log('before timeout');
    }).then(() => {
        Promise.resolve().then(() => {
          console.log('also before timeout')
        })
    })
})
console.log(2);
//1，2，3，before timeout，also before timeout，4，test;

分析：
1. 遇到setTimeout，异步宏任务，将() => {console.log(4)}放入宏任务队列中；
2. 遇到new Promise，new Promise在实例化的过程中所执行的代码都是同步进行的，所以输出1；
3. 而Promise.then，异步微任务，将其放入微任务队列中
4. 遇到同步任务console.log(2)，输出2；主线程中同步任务执行完
5. 从微任务队列中取出任务到主线程中，输出3，此微任务中又有微任务，Promise.resolve().then(微任务a).then(微任务b)，将其依次放入微任务队列中；
6. 从微任务队列中取出任务a到主线程中，输出 before timeout；
7. 从微任务队列中取出任务b到主线程中，任务b又注册了一个微任务c，放入微任务队列中；
8. 从微任务队列中取出任务c到主线程中，输出 also before timeout；微任务队列为空
9. 从宏任务队列中取出任务到主线程，此任务中注册了一个微任务d，将其放入微任务队列中，接下来遇到输出4，宏任务队列为空
10. 从微任务队列中取出任务d到主线程，输出test，微任务队列为空

例三：

console.log(1)
setTimeout(function() {
    console.log(2)
}, 0)
const p = new Promise((resolve, reject) => {
    resolve(4)
})
p.then(data => {
    console.log(data)
})
console.log(3)
//1，3，4，2

分析：
1. 遇到同步任务console.log(1);输出1；
2. 遇到setTimeout 异步宏任务，放入宏任务队列中；
3. 遇到 Promise，new Promise在实例化的过程中所执行的代码都是同步进行的，但由于new Promise没有输出事件，所以接着执行遇到.then；
4. 执行.then，异步微任务,被分发到微任务Event Queue中；
5. 遇到同步任务console.log(3);输出3；
6. 主线程中同步任务执行完，从微任务队列中取出任务到主线程中，p.then 输出4,微任务执行完毕，任务队列为空；
7. 开始执行宏任务setTimeout 输出2,宏任务队列为空；

例四：

console.log(1)
setTimeout(function() {
    console.log(2)
    new Promise(function(resolve) {
        console.log(3)
        resolve()
    }).then(function() {
        console.log(4)
    })
})
 
new Promise(function(resolve) {
    console.log(5)
    resolve()
}).then(function() {
    console.log(6)
})
 
setTimeout(function() {
    console.log(7)
    new Promise(function(resolve) {
        console.log(8)
        resolve()
    }).then(function() {
        console.log(9)
    })
})
console.log(10)
//1，5，10，6，2，3，4，7，8，9

分析：
1. 遇到同步任务console.log(1);输出1；
2. 遇到setTimeout 异步宏任务，放入宏任务队列中；
3. 遇到 Promise，new Promise在实例化的过程中所执行的代码都是同步进行的，所以输出5，所以接着执行遇到.then；
4. 执行.then，异步微任务,被分发到微任务Event Queue中；
5. 遇到setTimeout，异步宏任务;放入宏任务队列中；
6. 遇到同步任务console.log(10);输出10,主线程中同步任务全部执行完;
7. 从微任务队列中取出任务到主线程中，输出6；
8. 在从宏任务队列中取出任务到主线程中，执行第一个setTimeout，输出2，3，4（在宏任务中执行同步,同步，异步微任务）;
9. 在执行第二个setTimeout，输出7，8，9（和8同理）；

最后总结
微任务和宏任务的执行顺序是先执行同步任务，先执行同步后异步，异步分为宏任务和微任务两种，异步遇到微任务先执行微任务，执行完后如果没有微任务，就执行下一个宏任务。