this 在 JavaScript 中是一個(gè)動(dòng)態(tài)綁定的關(guān)鍵字，它的值取決于函數(shù)被調(diào)用的方式，而不是定義的方式。這種靈活性非常強(qiáng)大，但也導(dǎo)致了大量的錯(cuò)誤。TypeScript 的核心目標(biāo)之一就是通過(guò)靜態(tài)類(lèi)型分析來(lái)“馴服” this，提前發(fā)現(xiàn)錯(cuò)誤，讓代碼更可預(yù)測(cè)。

1. JavaScript 中 this 的問(wèn)題回顧

在 JS 中，this 的指向非常靈活，例如：

let obj = {
  name: "Alice",
  greet: function() {
    console.log("Hello, " + this.name);
  }
};

obj.greet(); // 輸出: "Hello, Alice" - this 指向 obj

let greetFunc = obj.greet;
greetFunc(); // 輸出: "Hello, undefined" - 在非嚴(yán)格模式下，this 指向全局對(duì)象（如 window）；嚴(yán)格模式下為 undefined

第二個(gè)調(diào)用就產(chǎn)生了問(wèn)題，因?yàn)?nbsp;this 的上下文丟失了。

2. TypeScript 如何提供幫助

TypeScript 并沒(méi)有改變 this 在運(yùn)行時(shí)的行為（它最終還是會(huì)編譯成 JavaScript），但它提供了兩種主要方式來(lái)幫助我們更早地發(fā)現(xiàn)錯(cuò)誤和明確地指定意圖：

方法一：--noImplicitThis 編譯器選項(xiàng)（推薦開(kāi)啟）

這是最重要的一個(gè)配置。當(dāng)開(kāi)啟時(shí)（或在 strict: true 模式下默認(rèn)開(kāi)啟），TypeScript 會(huì)對(duì)沒(méi)有明確類(lèi)型注解的、在任何地方使用了 this 的函數(shù)進(jìn)行檢查。

如果它推斷出 this 的類(lèi)型是 any（即不明確），它會(huì)報(bào)錯(cuò)。

示例：

// 在 tsconfig.json 中設(shè)置了 "noImplicitThis": true

function fancyDate() {
  return `${this.getDate()}/${this.getMonth()}/${this.getFullYear()}`; 
  // ^ 錯(cuò)誤：'this' 隱含地為 'any' 類(lèi)型，因?yàn)樗鼪](méi)有類(lèi)型注解。
}

TypeScript 發(fā)現(xiàn)這個(gè)函數(shù)里的 this 可能是任何東西，這很危險(xiǎn)，所以它提示我們需要給 this 一個(gè)類(lèi)型。

方法二：在函數(shù)中顯式聲明 this 的類(lèi)型

TypeScript 允許我們?cè)诤瘮?shù)的參數(shù)列表中，第一個(gè)參數(shù)的位置為 this 聲明類(lèi)型。這個(gè)參數(shù)在編譯后會(huì)被移除，它只是一個(gè)類(lèi)型占位符。

語(yǔ)法：

function functionName(this: ThisType, ...normalArgs) {
  // 函數(shù)體
}

示例：修復(fù)上面的錯(cuò)誤

function fancyDate(this: Date) { // 聲明 this 必須是 Date 類(lèi)型
  return `${this.getDate()}/${this.getMonth() + 1}/${this.getFullYear()}`;
}

// 現(xiàn)在調(diào)用時(shí)必須使用 call/apply 或者 bind 來(lái)提供正確的 this 上下文
fancyDate.call(new Date()); // 正確: "16/9/2023" (示例日期)
fancyDate(); // 錯(cuò)誤：The 'this' context of type 'void' is not assignable to method's 'this' of type 'Date'.

現(xiàn)在 TypeScript 會(huì)強(qiáng)制你以正確的方式調(diào)用 fancyDate，否則會(huì)在編譯時(shí)報(bào)錯(cuò)。

3. 在對(duì)象和類(lèi)中的 this

在普通對(duì)象方法中

TypeScript 能夠智能地推斷出對(duì)象方法中的 this 類(lèi)型。

const user = {
  name: "Bob",
  greet() {
    console.log(`Hello, ${this.name}!`); 
    // TypeScript 知道 this 是 { name: string; greet(): void; } 類(lèi)型
    console.log(this.age); // 錯(cuò)誤：類(lèi)型上不存在屬性 'age'
  }
};

在類(lèi)中

在類(lèi)中，this 通常指向?qū)嵗旧恚琓ypeScript 能完美地推斷這一點(diǎn)。

class Person {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  greet() {
    console.log(`Hello, I'm ${this.name}`); // this 是 Person 實(shí)例
  }
}

const alice = new Person("Alice");
alice.greet();

4. 回調(diào)函數(shù)中的 this 問(wèn)題與解決方案

這是 this 最容易出問(wèn)題的地方，尤其是在事件監(jiān)聽(tīng)、定時(shí)器等場(chǎng)景。

經(jīng)典問(wèn)題示例：

class Button {
  value: string = "Click me!";

  onClick() {
    alert(this.value); 
  }

  setupEventListener() {
    // 這里 this.onClick 被作為回調(diào)函數(shù)傳遞，脫離了原始的 this 上下文
    document.addEventListener('click', this.onClick); 
    // 當(dāng)事件觸發(fā)時(shí)，this 會(huì)指向 document（或 undefined），而不是 Button 實(shí)例
  }
}

解決方案：

1. 使用箭頭函數(shù)（首選）： 箭頭函數(shù)不綁定自己的 this，它會(huì)捕獲其所在上下文的 this 值。

   class Button {
     value: string = "Click me!";
   
     // 使用箭頭函數(shù)定義方法
     onClick = () => {
       alert(this.value); // 這里的 this 永遠(yuǎn)指向 Button 實(shí)例
     }
   
     setupEventListener() {
       document.addEventListener('click', this.onClick); // 現(xiàn)在可以正確工作了
     }
   }

2. 使用 bind： 在傳遞函數(shù)前將其綁定到正確的 this。

   class Button {
     // ... 同上
   
     setupEventListener() {
       // 在構(gòu)造函數(shù)中綁定也可以：this.onClick = this.onClick.bind(this);
       document.addEventListener('click', this.onClick.bind(this));
     }
   }

3. 在回調(diào)類(lèi)型中聲明 this： 某些庫(kù)（如 DOM 庫(kù)）已經(jīng)為事件監(jiān)聽(tīng)器定義了 this 的類(lèi)型。

   document.addEventListener('click', function(this: Document, e: Event) {
     console.log(this); // TypeScript 知道這里的 this 是 Document 類(lèi)型
   });

5. this 參數(shù)與函數(shù)重載

你還可以將 this 參數(shù)與函數(shù)重載結(jié)合使用，來(lái)根據(jù)不同的調(diào)用上下文返回不同的類(lèi)型。

interface HTMLElement {
  addEventListener(
    this: this,
    type: string,
    listener: (this: this, ev: Event) => any,
    options?: boolean | AddEventListenerOptions
  ): void;
}

// 這樣，在 listener 函數(shù)內(nèi)部，this 就會(huì)被正確地推斷為調(diào)用 addEventListener 的那個(gè) HTMLElement 本身。

// 這樣，在 listener 函數(shù)內(nèi)部，this 就會(huì)被正確地推斷為調(diào)用 addEventListener 的那個(gè) HTMLElement 本身。

總結(jié)

核心思想： TypeScript 通過(guò)靜態(tài)類(lèi)型系統(tǒng)，讓你在代碼運(yùn)行之前就明確 this 應(yīng)該是什么，并強(qiáng)制你按照規(guī)則來(lái)使用它，從而將運(yùn)行時(shí)錯(cuò)誤轉(zhuǎn)變?yōu)榫幾g時(shí)錯(cuò)誤，大大提高了代碼的健壯性。