关于js 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

两个知识点：

1. fn.call 和 fn.apply 可以改变函数 fn 体内的 this 值
2. 箭头函数根本没有自己的 this，导致内部的 this 就是外层代码块的 this。

function foo(){
  console.log(this)  // call 改变了 this 为 {id:42}
  setTimeout(()=>{
    console.log("is:",this.id);//箭头函数不绑定 this,所以 this 是父级作用域的this,也就是上面的{id:42}
  },100)
}
var id = 21;
foo.call({id:42})

具体用法，题主可以再去查查 MDN 和 ES6标准入门

Answer 2

因为你用了箭头函数
可以简单理解为：箭头函数内部没有this，如果内部使用了this，它就会把定义时的this作为执行环境的一部分保存起来，在执行时会使用保存的this。

如果你把箭头函数改成function，结果就不一样了

function foo(){
  setTimeout(function(){        // 改成function
    console.log("is:",this.id); // 现在会打印21
  },100)
}
var id = 21;
foo.call({id:42})

Answer 3

.call 传入得对象就是this setTimeout没有this 用的是 foo的this foo的this就是foo.call传入的对象

Answer 4

<input type="button" value="点击" id="btn">
<script>
    document.getElementById('btn').onclick = function () {
      /*var _this = this;
      setTimeout(function(){
        // 内部的this 默认指向window
        _this.value = '哈哈';
      }, 1000);*/

      // 箭头函数中的this， 永远指向它所在作用域中的this
      // 会捕获其所在上下文的  this 值，作为自己的 this 值
      setTimeout(() => {
        this.value = '哈哈';
      }, 1000);
    }
  </script>