箭头函数

定义

箭头函数（Arrow Function）是 JavaScript ES6 引入的一种简洁的函数表达式书写方式，使用箭头符号 => 来定义函数。箭头函数通过简化函数声明语法，使得函数的定义更加简洁，并且具有不同于普通函数的 this 绑定规则。

组成部分

1.箭头符号

使用 => 来表示函数的定义。

2.函数参数

函数的输入参数，括号中写出（对于单个参数可以省略括号）。

3.函数体

箭头后面跟着的函数体部分，若函数体只有一行表达式，可以省略 {} 和 return 关键字。

结构形式

1.基本语法

1
2
const sum = (a, b) => a + b;

2.无参数函数

1
2
const greet = () => console.log("Hello, World!");

3.单个参数:如果只有一个参数，可以省略括号

1
2
const square = x => x * x;

4.多行函数体:如果函数体有多行代码，必须使用 {} 包裹，并且需要显式 return 语句返回值

1
2
3
4
5
const multiply = (a, b) => {
  const result = a * b;
  return result;
};

目的

为了简化函数定义，特别是在需要传递回调函数时，减少样板代码，提升代码可读性。同时，箭头函数通过词法绑定 this，避免了常见的 this 绑定错误问题，特别是在使用回调函数时。

基本原理

当调用一个箭头函数时，this 会根据其定义位置的外部上下文来绑定，而不是根据函数调用的上下文。