Typescript：箭头函数-马育民老师

### 应用场景

- 作为回调函数，如：事件、定时器、数组方法中使用箭头函数，避免 `this` 指向问题
- 异步操作
- 简单的单行逻辑（函数中只有一行代码），适合用箭头函数简化代码

箭头函数通过简洁的语法和稳定的 `this` 绑定，成为 ArkTS 开发中处理回调场景的理想选择。

# 基本语法

**注意：**要将箭头函数 **赋值** 给 **变量** 或 **常量**，否则无法调用

### 形式一
```
(参数:类型) => 表达式
```

### 形式二
```
(参数:类型) => {
    代码块
}
```

# 箭头函数的写法

1. 只有一个参数，`()` 可以 **省略**（没有参数 或 多个参数，不能省略）
2. `{}` 中只有一行代码，`{}` 可省略
3. `{}` 中只有一行代码，而是是 `return` ，`{}` 和 `return` 可以省略

### 例子：没有形参，{}中只有一条语句

- 没有形参，`()` 不可省略
- `{}`中只有一条语句，`{}` 可以省略

普通函数：
```
function test():number {
  return 10
}

let res = test()
console.log("res="+res)
```

箭头函数：
```
// 没有形参，不可省略 ()
// 同时省略{} 和 return，自动将该行代码的结果返回
let test2 = () => 10

let res2=test2()
console.log("res2="+res2)
```

### 例子：只有一个形参，{}中有一条语句

- 只有一个形参，`()` 可省略
- `{}`中只有一条语句，`{}` 可以省略

普通函数：
```
function test(a:number):number {
  return a*2
}

let res:number=test(3)
console.log("res="+res)
```

箭头函数：
```
// 因为这里无法推断出形参 a 的类型，所以不能省略()。最为回调函数时，可以推断出类型，就可省略()
// 同时省略{} 和 return，自动将该行代码的结果返回
let test2 = (a:number) => a*2

let res2:number = test2(3)
console.log("res2="+res2)
```

### 例子：多个参数，{}中有多条语句

- 多个形参，`()` 不可省略
- `{}` 中有多条语句，`{}` 不可省略

普通函数：
```
function add(a:number,b:number):number {
  console.log("a="+a)
  console.log("b="+b)
  return a+b
}

let res:number = add(1,2)
console.log("res="+res)
```

箭头函数：
```
// 多个形参，不可省略()
// {}中有多行代码，不可省略{}
let add2 = (a:number,b:number) => {
  console.log("a="+a)
  console.log("b="+b)
  return a+b
}

let res:number = add2(1,2)
console.log("res="+res)
```

# 与传统函数的核心区别

### this 绑定规则不同

- **传统函数**：`this` 指向调用时的上下文（动态绑定），取决于谁调用它。
- **箭头函数**：没有自己的 `this`，它的 `this` 继承自声明时所在的上下文（词法绑定），且无法通过 `call`/`apply`/`bind` 改变。

```typescript
class Example {
  value = "class value";

// 传统函数方法
  traditionalMethod() {
    console.log("traditionalMethod:", this.value); // 正确访问类的 value
  }

// 箭头函数作为类属性
  arrowMethod = () => {
    console.log("arrowMethod:", this.value); // 正确访问类的 value
  }

test() {
    // 传统函数作为回调，this 丢失（指向全局或 undefined）
    setTimeout(function() {
      console.log("setTimeout 传统函数:", this?.value); // 输出: undefined
    }, 100);

// 箭头函数作为回调，this 继承自 test() 的上下文（Example 实例）
    setTimeout(() => {
      console.log("setTimeout 箭头函数:", this.value); // 输出: class value
    }, 100);
  }
}

const obj = new Example();
obj.traditionalMethod(); // traditionalMethod: class value
obj.arrowMethod();       // arrowMethod: class value
obj.test();
```

### 其他关键差异

| 特性                | 传统函数               | 箭头函数                 |
|---------------------|------------------------|--------------------------|
| `new` 调用          | 可以（作为构造函数）   | 不可以（会报错）         |
| `arguments` 对象    | 有（类数组参数集合）   | 没有（可用剩余参数替代） |
| `prototype` 属性    | 有                     | 没有                     |
| 作为对象方法        | `this` 指向对象实例    | `this` 继承外部上下文    |

# 常见使用场景

### 回调函数

简化数组方法（`map`/`filter`/`reduce` 等）、定时器、事件监听等场景的回调：

```typescript
const numbers = [1, 2, 3, 4, 5];

// 数组 map 回调
const doubled = numbers.map(n => n * 2); // [2, 4, 6, 8, 10]

// 数组 filter 回调
const evens = numbers.filter(n => n % 2 === 0); // [2, 4]

// 事件监听
const button = document.getElementById("myButton");
button?.addEventListener("click", () => {
  console.log("Button clicked");
});
```

### 简化匿名函数

在 Promise、异步操作中替代冗长的匿名函数：

```typescript
// Promise 回调
fetch("/data")
  .then(response => response.json())
  .then(data => console.log("Data:", data))
  .catch(error => console.error("Error:", error));

// 异步函数中的回调
async function loadData() {
  try {
    const response = await fetch("/data");
    const data = await response.json();
    console.log("Data:", data);
  } catch (error) {
    console.error("Error:", error);
  }
}
```

# 注意事项

- 避免在需要动态 `this` 的场景（如对象方法、构造函数）使用箭头函数。
- 当箭头函数返回对象时，必须用括号包裹对象字面量（`() => ({ key: value })`），否则会被解析为代码块。
- 箭头函数没有 `arguments` 对象，如需获取所有参数，可使用剩余参数：
  ```typescript
  const logArgs = (...args: any[]) => {
    console.log(args); // 数组形式的参数集合
  };
  ```

原文出处：http://malaoshi.top/show_1GW1wie2eOjM.html