【JS基础】关于事件循环的一道题目-526互联

const myObject = {
    foo: 'hello',

    func: function () {
        const self = this
        console.log(1, this.foo)
        console.log(2, self.foo)

        function a() {
            console.log(3, this.foo)

            setTimeout(function() {
                const p = new Promise(resolve => {
                    console.log(4, this.foo)
                    setTimeout(() => console.log(5, this.foo), 100)

                    resolve(self.foo)
                })

                p.then(e => console.log(6, e))

                console.log(7, this.foo)
                console.log(8, self.foo)
            }, 100)

            Promise.resolve(this.foo).then(e => console.log(9, e))
        }

        const b = () => {
            console.log(10, this.foo)
            console.log(11, self.foo)
        }

        a()
        b()
    },
}

myObject.func()
/*
1 hello
2 hello
3 undefined
10 hello
11 hello
9 undefined
4 undefined
7 undefined
8 hello
6 hello
5 undefined
 */

打印 3 undefined 是因为在函数 function a(){...}中没有绑定特定的上下文，this指向的是最外层（window），没有找到 foo 这个变量。

setTimeout 和 Promise.resolve中的函数会在下一轮事件循环中执行，所以先执行 b() 中的代码

Promise.resolve().then()是一个微任务，会优先于setTimeout这个宏任务，所以先打印 9，由于this指向最外层，所以没有找到 foo 变量，打印 undefined

100毫秒后执行 new Promise，构造函数中会先打印4，里面的 setTimeout 会作为一个宏任务加入到队列，等待下一轮执行

p.then是一个微任务，加入队列，下一轮执行；

打印7 和 8；

这轮事件循环结束，开始下一轮事件循环，先从微任务开始，打印 6；

微任务结束，开始执行宏任务，最里面的 setTimeout 开始执行，打印 5

结束！！