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

以下內(nèi)容改編自 https://www.cnblogs.com/jeodeng/p/10658590.html

// 先給window加一個id，以便于確認(rèn)之后this的指向
window.id = 0;
// 聲明一個函數(shù)fn
const fn = {
  id: 1,
  say: function() {
    console.log('id:', this.id);
  },
 // 1, fn調(diào)用say，this指向fn

  sayArrow: () => {
    console.log('id:', this.id);
  },
 // 0, 箭頭函數(shù)雖然定義在fn中，但fn不是作用域，作用域是指函數(shù)內(nèi)部，繼續(xù)往外找，到了最外層window

  say1: function() {
    setTimeout(function() {
      console.log('id:', this.id);
    }, 1000);
  },
// 0, setTimeout傳入的回調(diào)方法其實是在setTimeout中執(zhí)行的，沒有其它對象調(diào)用該回調(diào)方法，所以回調(diào)方法的this指向window

  say2: function() {
    let that = this;
    setTimeout(function() {
      console.log('id:', that.id);
    }, 1000);
  },
// 1, that指向fn，又把fn引用傳進了setTimeout回調(diào)方法

  say3: function() {
    setTimeout(() => {
      console.log('id:', this.id);
    }, 1000);
  },
/**
1, setTimeout傳入了一個匿名箭頭函數(shù)，相當(dāng)于
say3: function() {
  var temp = () => {
      console.log('id:', this.id);
    };
    setTimeout(temp, 1000);
  }
箭頭函數(shù)的this指向它的作用域，箭頭函數(shù)是在say3函數(shù)中定義的，say3的this指向調(diào)用它的fn
**/

  say4: () => {
    setTimeout(() => {
      console.log('id:', this.id);
    }, 1000);
  },
// 0, 基于上面的解釋，say4是在fn中定義的，fn是對象，不是say4的作用域，所以繼續(xù)往上，到達(dá)window

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