在 TypeScript 中，箭頭函數(shù)與普通函數(shù)的區(qū)別基本繼承了 JavaScript 的特性，同時(shí)由于 TypeScript 的類型系統(tǒng)，還存在一些與類型相關(guān)的差異。

主要區(qū)別如下：

1.語(yǔ)法與類型注解

普通函數(shù)：需要顯式使用function關(guān)鍵字，參數(shù)和返回值的類型注解直接寫在參數(shù)列表和函數(shù)體前

function add(a: number, b: number): number {
  return a + b;
}

箭頭函數(shù)：語(yǔ)法更簡(jiǎn)潔，省略function關(guān)鍵字，使用=>連接參數(shù)和函數(shù)體

const add = (a: number, b: number): number => a + b;

2.this指向與類型推斷

普通函數(shù)：

(1)this的類型是動(dòng)態(tài)的，取決于調(diào)用方式

 (2) 可通過(guò)this: Type語(yǔ)法顯式指定this類型（TypeScript 擴(kuò)展特性）

function greet(this: { name: string }): string {
  return `Hello, ${this.name}`;
}

箭頭函數(shù)：

 (1) 沒(méi)有自己的this，繼承自外層作用域

 (2)無(wú)法通過(guò)this: Type指定this類型（TypeScript 會(huì)報(bào)錯(cuò)）

 (3) TypeScript 能更好地推斷箭頭函數(shù)中this的類型

3.其他 JavaScript 繼承的區(qū)別

構(gòu)造函數(shù)：箭頭函數(shù)不能作為構(gòu)造函數(shù)使用，無(wú)法通過(guò)new調(diào)用（TypeScript 會(huì)編譯報(bào)錯(cuò)）

arguments 對(duì)象：箭頭函數(shù)沒(méi)有arguments對(duì)象，需使用剩余參數(shù)...args

原型屬性：箭頭函數(shù)沒(méi)有prototype屬性

Generator 支持：箭頭函數(shù)不能作為 Generator 函數(shù)使用

4.類型推斷差異

在 TypeScript 中，箭頭函數(shù)的類型推斷往往更簡(jiǎn)潔，尤其是在回調(diào)函數(shù)中：

// 普通函數(shù)需要顯式注解參數(shù)類型
const numbers = [1, 2, 3];
numbers.map(function(item: number): number {
  return item * 2;
});
// 箭頭函數(shù)可省略類型注解（TypeScript自動(dòng)推斷）
numbers.map(item => item * 2);

5.函數(shù)重載

箭頭函數(shù)：不支持函數(shù)重載，只能有一個(gè)函數(shù)簽名

普通函數(shù)：支持函數(shù)重載，可定義多個(gè)函數(shù)簽名

function format(value: string): string;
function format(value: number): string;
function format(value: string | number): string {
  return String(value);
}

總結(jié)來(lái)說(shuō)，TypeScript 中的箭頭函數(shù)與普通函數(shù)的核心區(qū)別和 JavaScript 一致，但 TypeScript 的類型系統(tǒng)讓這些區(qū)別在類型檢查層面更加明顯，尤其是在this類型處理和函數(shù)重載方面。

到此這篇關(guān)于typescript中箭頭函數(shù)與普通函數(shù)的區(qū)別的文章就介紹到這了,更多相關(guān)typescript 箭頭函數(shù)與普通函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論