关于JavaScript this的问题

Question

function foo(){

  setTimeout(()=>{

    console.log("is:",this.id);//42

  },100)

}

var id = 21;

foo.call({id:42})

js中函数的this是动态的，要看运行时是谁调用的，在这里面

foo内部的this指向匿名对象

setTimeout是全局调用的

箭头函数没有this 指向相邻的外层 即为setTimeout的this 

所以为什么不是21 打印结果为什么是42？？？

求大神详细解释？

Answer 1

<input type="button" value="点击" id="btn"><script>&nbsp; &nbsp; document.getElementById('btn').onclick = function () {&nbsp; &nbsp; &nbsp; /*var _this = this;&nbsp; &nbsp; &nbsp; setTimeout(function(){&nbsp; &nbsp; &nbsp; &nbsp; // 内部的this 默认指向window&nbsp; &nbsp; &nbsp; &nbsp; _this.value = '哈哈';&nbsp; &nbsp; &nbsp; }, 1000);*/&nbsp; &nbsp; &nbsp; // 箭头函数中的this， 永远指向它所在作用域中的this&nbsp; &nbsp; &nbsp; // 会捕获其所在上下文的&nbsp; this 值，作为自己的 this 值&nbsp; &nbsp; &nbsp; setTimeout(() => {&nbsp; &nbsp; &nbsp; &nbsp; this.value = '哈哈';&nbsp; &nbsp; &nbsp; }, 1000);&nbsp; &nbsp; }&nbsp; </script>