定时器回调函数作用域问题

Question

let id = setInterval(() => console.log(id), 100);

为什么回调函数中能获得id的值
我以为是在全局作用域里获取的，但我用立即执行包裹了一下，还是能获取到

(() => {
    let id = setInterval(() => console.log(id), 1000);
})();

用setTimeOut和上面表现一致。望大神解释一下

Answer 1

这就是“闭包”，即跨作用域访问了变量。

先从当前作用域找，找不到就去上一层作用域找，再找不到再去上一层 …… 直到最顶层的作用域为止，要是还没有，那就去 globalThis 上看挂载的属性。在浏览器里 globalThis 也即 window。

何况箭头函数还没有自己的作用域，都是来自父级。

Answer 2

js在执行这行代码会有如下过程：

1. let 声明变量 id，初始值是 undefined;
2. 执行 setInterval 函数，执行结果赋值给 id，id 变成定时器的编号（正整数）；
3. setInterval 的异步回调函数这里是箭头函数，函数中变量 id 是由变量声明位置决定，与执行位置无关，因此这里的 id 取值就是上面 id 的值。