# 箭头函数

作者: 多叉树；转载须注明出处

# 箭头函数简介

箭头函数是ES6引入的一种新的函数语法，它提供了一种更简洁的方式来编写函数表达式。箭头函数有以下特点：

更简短的函数
不绑定this
不能用作构造函数
没有arguments对象

基本语法

(参数1, 参数2, …, 参数N) => { 函数体 }

# 箭头函数示例

基本用法

// 传统函数
let sum = function(a, b) {
  return a + b;
};

// 箭头函数
let sum = (a, b) => a + b;

没有参数的箭头函数

let sayHello = () => console.log("Hello!");

单个参数的箭头函数

let double = x => x * 2;

多行函数体

let sum = (a, b) => {
  let result = a + b;
  return result;
};

箭头函数的函数体加上()包裹，可以省略使用return

箭头函数的函数体加上()包裹是一种特殊的语法变体，用于返回对象字面量。这种语法允许我们在不使用return关键字的情况下直接返回一个对象。

// 不使用括号，会导致语法错误
let getPersonWrong = name => { name: name, age: 30 };

// 使用括号包裹对象字面量
let getPersonCorrect = name => ({ name: name, age: 30 });

console.log(getPersonCorrect("张三")); // 输出: { name: "张三", age: 30 }

在这个例子中，如果我们不使用括号，JavaScript会将花括号解释为函数体的开始，而不是对象字面量，这会导致语法错误。通过使用括号，我们告诉JavaScript这是一个需要被求值并返回的表达式，而不是函数体。

这种语法特别适用于需要快速返回对象的场景，比如在数组方法或函数式编程中：

let people = ["张三", "李四", "王五"];
let peopleObjects = people.map(name => ({ name, greeting: `你好，我是${name}` }));

console.log(peopleObjects);
// 输出: [
//   { name: "张三", greeting: "你好，我是张三" },
//   { name: "李四", greeting: "你好，我是李四" },
//   { name: "王五", greeting: "你好，我是王五" }
// ]

这种语法提供了一种简洁的方式来创建和返回对象，特别是在需要快速转换数据或创建小型对象的场景中非常有用。

在数组方法中使用

let numbers = [1, 2, 3, 4, 5];
let squaredNumbers = numbers.map(num => num * num);

# 注意事项

虽然箭头函数提供了更简洁的语法，但在使用时需要注意以下几点：

箭头函数不适合用作有this引用方法，因为它们不绑定this

让我们通过一个例子来说明这一点：

const person = {
  name: '张三',
  greet: () => {
    console.log(`你好，我是${this.name}`);
  }
};

person.greet(); // 输出: 你好，我是undefined

在这个例子中，我们期望 greet 方法输出 "你好，我是张三"，但实际上它输出了 "你好，我是undefined"。这是因为箭头函数不绑定自己的 this，而是继承外围作用域的 this。

相比之下，如果我们使用传统的函数声明，结果就会符合预期：

const person = {
  name: '张三',
  greet: function() {
    console.log(`你好，我是${this.name}`);
  }
};

person.greet(); // 输出: 你好，我是张三

这个例子清楚地说明了为什么箭头函数不适合用作对象方法，尤其是在需要访问对象属性的情况下。

不能用作构造函数（不能使用new关键字）

让我们通过一个例子来说明箭头函数不能用作构造函数：

// 传统函数可以用作构造函数
function Person(name) {
  this.name = name;
}
const person1 = new Person('张三'); // 正常工作

// 箭头函数不能用作构造函数
const ArrowPerson = (name) => {
  this.name = name;
};
const person2 = new ArrowPerson('李四'); // 抛出 TypeError: ArrowPerson is not a constructor

在这个例子中，我们可以看到传统函数可以用 new 关键字创建新实例，而尝试对箭头函数使用 new 关键字会导致 TypeError。这是因为箭头函数没有自己的 this 绑定，也没有 prototype 属性，这些都是构造函数所必需的。

没有自己的arguments对象

让我们通过一个例子来说明箭头函数没有自己的 arguments 对象：

// 传统函数
function traditionalFunc() {
  console.log(arguments);
}

traditionalFunc(1, 2, 3); // 输出: [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]

// 箭头函数
const arrowFunc = () => {
  console.log(arguments);
};

arrowFunc(1, 2, 3); // 抛出 ReferenceError: arguments is not defined

在这个例子中，我们可以看到传统函数可以访问 arguments 对象，它包含了所有传递给函数的参数。而箭头函数尝试访问 arguments 对象时会抛出 ReferenceError，因为箭头函数没有自己的 arguments 对象。

如果在箭头函数中需要访问函数参数，可以使用剩余参数语法（rest parameters）：

const arrowFuncWithRest = (...args) => {
  console.log(args);
};

arrowFuncWithRest(1, 2, 3); // 输出: [1, 2, 3]

使用剩余参数语法，我们可以在箭头函数中获取到所有传入的参数，达到类似 arguments 对象的效果。

在需要动态this的场景中应避免使用箭头函数

实际上的箭头函数指向window对象

💡 动态this是指函数内部的this值会根据函数的调用方式而改变。在JavaScript中，thi的值取决于函数被调用的上下文，而不是函数被定义的位置。这种特性使得函数可以根据不同的调用情况灵活地访问不同对象的属性和方法。

以下是几种常见的动态this情况：

在方法调用中，this指向调用该方法的对象。
在全局作用域或普通函数调用中，this指向全局对象（在浏览器中是window，在Node.js中是global）。
在构造函数中，this指向新创建的实例对象。
使用call()、apply()或bind()方法时，可以显式地指定this的值。

箭头函数不具有自己的this绑定，它会捕获其所在上下文的this值。这就是为什么在需要动态this的场景中应避免使用箭头函数，因为它们无法提供预期的this行为。

让我们通过一个例子来说明为什么在需要动态this的场景中应避免使用箭头函数：

const button = document.getElementById('myButton');

// 使用传统函数
button.addEventListener('click', function() {
  console.log(this); // 这里的 this 指向 button 元素
  this.innerHTML = 'Clicked!';
});

// 使用箭头函数
button.addEventListener('click', () => {
  console.log(this); // 这里的 this 指向全局对象（在浏览器中是 window）
  // 下面这行代码会报错，因为 this 不指向 button
  this.innerHTML = 'Clicked!';
});

在这个例子中，我们为一个按钮添加了点击事件监听器。使用传统函数时，this 正确地指向了被点击的按钮元素，我们可以通过 this 来修改按钮的内容。但是使用箭头函数时，this 不再指向按钮元素，而是指向了全局对象，这导致我们无法通过 this 来操作按钮。

这个例子清楚地展示了为什么在需要动态 this 的场景中（如事件处理器、对象方法等）应该避免使用箭头函数。在这些情况下，传统函数能够提供更符合预期的 this 绑定行为。

总的来说，箭头函数是一个强大的语法特性，可以使代码更简洁、更易读，但需要根据具体情况选择是否使用。

← 模板字符串函数参数的默认值 →