typescript中箭头函数与普通函数的区别

在 TypeScript 中，箭头函数与普通函数的区别基本继承了 JavaScript 的特性，同时由于 TypeScript 的类型系统，还存在一些与类型相关的差异。

主要区别如下：

1.语法与类型注解

普通函数：需要显式使用function关键字，参数和返回值的类型注解直接写在参数列表和函数体前

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

箭头函数：语法更简洁，省略function关键字，使用=>连接参数和函数体

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

2.this指向与类型推断

普通函数：

  (1)this的类型是动态的，取决于调用方式

      (2) 可通过this: Type语法显式指定this类型（TypeScript 扩展特性）

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

箭头函数：

     (1) 没有自己的this，继承自外层作用域

     (2)无法通过this: Type指定this类型（TypeScript 会报错）

     (3) TypeScript 能更好地推断箭头函数中this的类型

3.其他 JavaScript 继承的区别

构造函数：箭头函数不能作为构造函数使用，无法通过new调用（TypeScript 会编译报错）

arguments 对象：箭头函数没有arguments对象，需使用剩余参数...args

原型属性：箭头函数没有prototype属性

Generator 支持：箭头函数不能作为 Generator 函数使用

4.类型推断差异

在 TypeScript 中，箭头函数的类型推断往往更简洁，尤其是在回调函数中：

// 普通函数需要显式注解参数类型
const numbers = [1, 2, 3];
numbers.map(function(item: number): number {
  return item * 2;
});

// 箭头函数可省略类型注解（TypeScript自动推断）
numbers.map(item => item * 2);

5.函数重载

箭头函数：不支持函数重载，只能有一个函数签名

普通函数：支持函数重载，可定义多个函数签名

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

总结来说，TypeScript 中的箭头函数与普通函数的核心区别和 JavaScript 一致，但 TypeScript 的类型系统让这些区别在类型检查层面更加明显，尤其是在this类型处理和函数重载方面。