对箭头函数补充了解

概念

Arrow Function 箭头函数是 ES6 引入的，是一种更简洁地定义函数的语法。在 JavaScript 和 TypeScript 中，它用 =>（箭头）连接 参数列表 和 函数体

// JavaScript
const add = (a, b) => a + b;

const func = (param1, param2) => {
  // 函数体
};

// TypeScript（显式类型注解）
const addTyped: (a: number, b: number) => number = (a, b) => a + b;

箭头函数是函数表达式的一种简写表达式，语义与 function 关键字定义的匿名函数一致，但它有自己独特的行为特性

基本语法

用法	示例
无参数	() => 42
一个参数（括号可省略）	x => x * 2
多个参数	(x, y) => x + y
多行语句（需要大括号和 return）	(x, y) => { const z = x + y; return z; }
返回对象字面量	() => ({ name: “Mayer” }) （必须用括号包裹对象）

主要要注意最后一种用法 () => ({ name: "Mayer" })，箭头函数直接返回对象的情况，在这种情况中，表达式直接返回状态对象，如果使用 () => { name: "Mayer" }，则是箭头表达式中常用于执行语句逻辑的操作，而不是直接返回一个值

所以对于箭头函数直接返回对象的情况中， 通过使用 ({}) 与常见执行语句逻辑操作作区分

核心特性

• 没有自己的 this，只会捕获其定义时的上下文的 this 值（词法作用域绑定），非常适用于回调函数中

class Counter {
  count = 0;
  // 传统写法：需要 bind，否则 setTimeout 内 this 指向 window/undefined
  incrementOld() {
    setTimeout(function () {          // function() { ... }
      this.count++;                   // ❌ 不工作
    }.bind(this), 100);
  }

  // 箭头函数：自动捕获 this
  increment() {
    setTimeout(() => {                // ()=>{ ... }
      this.count++;                   // ✅ OK
    }, 100);
  }
}

• 不能当构造函数，因为没有 [[Construct]] 内部方法，也没有 prototype 属性
• 没有自己的 arguments，使用外层作用域的 arguments；如需参数列表请用剩余参数语法 ...args
• 不能使用 yield，因为不能成为 generator 函数
• 不会被函数声明提升，因为它本质仍是函数**表达式

为什么不能当作构造函数

如何通过 New 来创建实例

首先会创建一个空对象，将该对象的 proto 属性指向构造函数的 prototype，然后将构造函数的 this 指向该对象并执行构造函数，如果构造函数有返回值且返回值是对象类型，则返回该返回值，否则返回 this 指向的对象

const Person = function (name, age) {  
  this.name = name;  
  this.age = age;  
}  
  
function myNew(fn, name, age) {  
  const obj = {};  
  obj.__proto__ = fn.prototype;  
  const res = fn.call(obj, name, age)  
  return res instanceof Object ? res : obj;  
}  
  
const person = myNew(Person, 'Mayer', 24);  
console.log(person)

解释原因

• 箭头函数只被当作一种“轻量可调用对象”创建，仅拥有 [[Call]]，完全没有 [[Construct]]，因此 new 会立刻抛出 TypeError: Arrow function is not a constructor。
• 箭头函数连默认的 prototype 字段都不会生成

没有自己的 arguments，this 对象

• 箭头函数以及自己的 arguments，this 都采取词法绑定，创建时会把外围作用域中现成的引入起啦哎，而不是再生成一个
• 因为箭头函数的设计初衷就是简洁 + 函数式，如果想在函数式中使用 argument，可以使用 ...rest 剩余参数的形式

const logArgs = (...args) => console.log(args);

// 如果非要复用外围 arguments（极少见），可包一层普通函数
function wrapper() {
  const inner = () => console.log(arguments); // 捕获 wrapper 的 arguments
  inner(1, 2, 3);
}

不能使用 yield

• yield 关键字用途：生成器函数的核心，它用于暂停函数的执行并返回一个值，之后可以恢复执行。
• 减少对生成器特性的支持：箭头函数没有 prototype 属性，也不具备 this、arguments、super 和 new.target 等生成器函数所需的特性，因此无法用作生成器

TS 中的使用

• 参数与返回值放在箭头左侧，与普通函数相同
• 可写显式返回类型，复杂回调时能增强可读性
• 支持泛型：在 <> 中声明类型参数

// 基本
const sum = (a: number, b: number): number => a + b;

// 泛型
const mapArray = <T, U>(arr: T[], fn: (item: T) => U): U[] =>
  arr.map(fn);

// React 事件回调（示例）
const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
  console.log(e.currentTarget);
};

参考

• [路飞]箭头函数为什么不能用作构造函数箭头函数为什么不能用作构造函数 要弄清楚这个问题，我们需要明白以下几点： 何为构造 - 掘金