一段代码理解js的this指向

首先，代码双手奉上

var str = 'window'
    const obj = {
      str: 'obj',
      fn: () => {
        console.log(this.str) //window
        setTimeout(() => {
          console.log(this.str) //window
        }, 0);
        setTimeout(function() {
          console.log(this.str) //window
        }, 0);
      },
      fn1() {
        console.log(this.str) //obj
        setTimeout(() => {
          console.log(this.str) //obj
        }, 0);
        setTimeout(function() {
          console.log(this.str) //window
        }, 0);
      }
    }
    obj.fn()
    obj.fn1()

函数中的this指向

es6箭头函数没出现之前，this的指向不是函数被创建时绑定，而是被怎么样的方式调用时绑定的。而箭头函数刚好相反，箭头函数的this指向是函数被创建时绑定的，它的指向就是当前词法作用域中的this，并且不会因为被怎么样的方式调用改变绑定。

当我们创建obj对象对象时，是在全局作用域下创建的，而对象中的方法也是这时候创建的，因此，fn()中的this指向window(对应上文箭头函数的this指向是函数被创建时绑定的)，fn1()中的this指向obj

js定时器中的this指向

由于setTimeout()调用的代码运行在与所在函数完全分离的执行环境上。 这会导致这些代码中包含的 this 关键字会指向 window (或全局)对象。

fn1()的第一个定时器因为是箭头函数，在创建时绑定this的指向，所以指向obj；
fn1()的第二个定时器是普通函数，所以this指向window。同理理解fn（）