javascript - js call的一个问题，很简单的代码，输出结果如何解释？

Question

foo2()采用了箭头函数。
按照对call的理解，foo.call({id:23})应该输出23，而不是0。所以，谁能解释一下吗？
代码如下：
<script type="text/javascript">

    function foo() {
        setTimeout(function (){
            console.log('id1:', this.id);
        }, 100);
    }
    
    function foo2() {
        setTimeout(() => {
            console.log('id2:', this.id);
        }, 100);
    }
    
    var id = 0;
    foo.call({id:23});
    foo2.call({id: 2});

</script>

执行结果：
0
2

Answer 1

foo 函数里面的 this 还是 {id:23} 但是到了 setTimeout 接受的回掉里面， this 就变为了 window 所以就输出了全局的 0，第二个因为箭头函数，this 与 foo2 的 this 绑定，所以是 2

Answer 2

foo2的setTimeout的参数是一个箭头函数，里面的this，绑定定义时所在的作用域（foo2执行的时候，this是call中对象），而不是指向运行时所在的作用域。普通的setTimeout中的函数绑定的是运行时作用域（window）。

Answer 3

1、foo函数的this是window,foo2函数的this是{id: 2}这个对象。

Answer 4

很明显，第一个this指向的是window，而第二个箭头函数this指向当前对象，也就是说谁调用，就指向谁；
第一个可以改下解决下：

    function foo() {
        var _this = this;
        setTimeout(function (){
            console.log('id1:', _this.id);
        }, 100);
    }
    var id = 0;
    foo.call({id:23});

Answer 5

1、setTimeout中的回调函数在foo执行100ms后执行，运行时的作用域是window。
2、箭头函数可以让setTimeout里面的this，绑定定义时所在的作用域，而不是指向运行时所在的作用域。

Answer 6

箭头函数作用域的问题