js是的this与箭头函数中的this

请搭配 https://zhuanlan.zhihu.com/p/57204184 使用

以下内容改编自 https://www.cnblogs.com/jeodeng/p/10658590.html

// 先给window加一个id，以便于确认之后this的指向
window.id = 0;
// 声明一个函数fn
const fn = {
  id: 1,
  say: function() {
    console.log('id:', this.id);
  },
 // 1, fn调用say，this指向fn

  sayArrow: () => {
    console.log('id:', this.id);
  },
 // 0, 箭头函数虽然定义在fn中，但fn不是作用域，作用域是指函数内部，继续往外找，到了最外层window

  say1: function() {
    setTimeout(function() {
      console.log('id:', this.id);
    }, 1000);
  },
// 0, setTimeout传入的回调方法其实是在setTimeout中执行的，没有其它对象调用该回调方法，所以回调方法的this指向window

  say2: function() {
    let that = this;
    setTimeout(function() {
      console.log('id:', that.id);
    }, 1000);
  },
// 1, that指向fn，又把fn引用传进了setTimeout回调方法

  say3: function() {
    setTimeout(() => {
      console.log('id:', this.id);
    }, 1000);
  },
/**
1, setTimeout传入了一个匿名箭头函数，相当于
say3: function() {
  var temp = () => {
      console.log('id:', this.id);
    };
    setTimeout(temp, 1000);
  }
箭头函数的this指向它的作用域，箭头函数是在say3函数中定义的，say3的this指向调用它的fn
**/

  say4: () => {
    setTimeout(() => {
      console.log('id:', this.id);
    }, 1000);
  },
// 0, 基于上面的解释，say4是在fn中定义的，fn是对象，不是say4的作用域，所以继续往上，到达window

  say5: () => {
    setTimeout(function() {
      console.log('id:', this.id);
    }, 1000);
  },
};
// 0，解释等同于 say1