TypeScript 箭頭函式

關於箭頭的函式的基本用法，這裡不多介紹，具體參閱箭頭函式介紹一章節。

下面再簡要介紹一下箭頭函式中this指向問題。

普通函式this的指向參閱JavaScript this一章節。

程式碼例項如下:

[JavaScript] 純文字檢視 複製程式碼
let obj = {
  info: ["螞蟻部落", "青島市南區", 4],
  show: function() {
    console.log(this.info[1]);
  }
}
obj.show();

普通函式中，this指向呼叫此函式的物件，頂層非方法式呼叫會將this指向全域性物件（在嚴格模式下， this為undefined而不是全域性物件）。再來看一段程式碼例項:

[typescript] 純文字檢視 複製程式碼
let obj = {
  info: ["螞蟻部落", "青島市南區", 4],
  show: function() {
    return function() {
      return {webName: this.info[0]};
    }
  }
}
let showName=obj.show();
showName();

上面的程式碼中，this不是指向obj，而是指向window物件。

此時，TypeScript將this推斷為any型別，如果在tsconfig.json配置noImplicitThis為true，報錯如下:

如果在函式宣告的時候，就能獲取this的指向，就可以解決此問題，ES2015提供的箭頭函式則具有此功能:

[typescript] 純文字檢視 複製程式碼
let obj = {
  info: ["螞蟻部落", "青島市南區", 4],
  show: function() {
    return () => {
      return {webName: this.info[0]};
    }
  }
}
let showName=obj.show();
console.log(showName().webName);

箭頭函式可以捕獲它宣告時所在的上下文中this的指向。