如何在JavaScript中使用箭头函数：新手指南

JavaScript是一种强大而多用途的编程语言，可以运行在浏览器、服务器、移动设备等多种平台上。它有许多特性和语法，让我们可以用更简洁和优雅的方式编写代码。其中一个特性就是箭头函数，它是ES6（ECMAScript 2015）引入的一种新的函数表达式，可以让我们写出更简短和清晰的函数。

箭头函数是什么？箭头函数是一种没有名字的匿名函数，它使用=>符号来定义。它可以省略参数的括号和函数体的花括号，如果函数只有一个表达式，还可以省略return关键字。箭头函数还有一些语义上的差异和使用上的限制：

• 箭头函数没有自己的绑定到this，arguments，或super，因此不应该作为方法使用。
• 箭头函数不能作为构造函数使用。用new调用它们会抛出一个TypeError。它们也没有访问new.target关键字的能力。
• 箭头函数不能在其函数体内使用yield，也不能作为生成器函数创建。

让我们逐步地将一个传统的匿名函数简化为最简单的箭头函数。沿途的每一步都是一个有效的箭头函数。注意：传统的函数表达式和箭头函数之间有更多的区别，而不仅仅是语法。我们将在接下来的几个小节中更详细地介绍它们的行为差异。

// 传统匿名函数
(function (a) {
  return a + 100;
});

// 箭头函数
(a) => {
  return a + 100;
};

// 2. 去掉函数体的花括号和return关键字 —— return是隐含的
(a) => a + 100;

// 3. 去掉参数的括号
a => a + 100;

在上面的例子中，参数周围的括号和函数体周围的花括号都可以省略。但是，它们只能在某些情况下省略。参数周围的括号只能在函数有一个简单参数时省略。如果有多个参数，没有参数，或者有默认参数，解构参数，或者剩余参数，那么参数列表周围的括号是必需的。

// 传统匿名函数
(function (a, b) {
  return a + b + 100;
});

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

const a = 4;
const b = 2;

// 传统匿名函数（没有参数）
(function () {
  return a + b + 100;
});

// 箭头函数（没有参数）
() => a + b + 100;

花括号只能在函数直接返回一个表达式时省略。如果函数体有额外的处理行为，那么花括号是必需的 —— 同时也需要return关键字。箭头函数不能猜测你想要返回什么或者什么时候返回。

// 传统匿名函数
(function (a, b) {
  const chuck = 42;
  return a + b + chuck;
});

// 箭头函数
(a, b) => {
  const chuck = 42;
  return a + b + chuck;
};

箭头函数总是没有名字的。

箭头函数和this

箭头函数和普通函数在处理this的时候也有不同。简而言之，箭头函数没有自己的绑定到this，而是继承了定义箭头函数的对象的this。在普通函数中，this关键字代表了调用函数的对象，它可以是window，document，一个按钮或者任何其他东西。在箭头函数中，this关键字总是代表了定义箭头函数的对象。

让我们看两个例子来理解这个区别。两个例子都是调用一个方法两次，第一次是在页面加载时，第二次是当用户点击一个按钮时。第一个例子使用了一个普通函数，第二个例子使用了一个箭头函数。结果显示，第一个例子返回了两个不同的对象（window和button），而第二个例子返回了两次window对象，因为window对象是函数的“拥有者”。

// 普通函数：this代表了调用函数的对象
hello = function () {
  document.getElementById("demo").innerHTML += this;
};

// window对象调用了函数
window.addEventListener("load", hello);

// 一个按钮对象调用了函数
document.getElementById("btn").addEventListener("click", hello);

// 箭头函数：this代表了定义箭头函数的对象
hello = () => {
  document.getElementById("demo").innerHTML += this;
};

// window对象调用了函数
window.addEventListener("load", hello);

// 一个按钮对象调用了函数
document.getElementById("btn").addEventListener("click", hello);

在使用函数时要记住这些区别。有时候你想要的是普通函数的行为，如果不是，就使用箭头函数。

浏览器支持

下表定义了第一个完全支持JavaScript中箭头函数的浏览器版本：

Chrome	Edge	Firefox	Safari	Opera
45	12	22	10	32

结论

箭头函数是JavaScript中一种新的函数表达式，它可以让我们用更简洁和优雅的方式编写匿名函数。它有一些语法上和语义上的差异和限制，需要我们注意和理解。箭头函数可以让我们的代码更清晰和易读，也可以避免一些常见的错误和混淆。

常见问题

• Q: 箭头函数有什么优点？

• A: 箭头函数有以下优点：

  • 它可以让我们用更简短的语法编写匿名函数。
  • 它可以避免一些关于this绑定的问题和错误。
  • 它可以让我们的代码更清晰和易读。

• Q: 箭头函数有什么缺点？

• A: 箭头函数有以下缺点：

  • 它不能作为方法或构造函数使用。
  • 它不能作为生成器函数使用。
  • 它不能访问arguments或new.target关键字。

• Q: 箭头函数和普通函数有什么区别？

• A: 箭头函数和普通函数有以下区别：

  • 箭头函数没有自己的绑定到this，而是继承了定义箭头函数的对象的this。
  • 箭头函数没有自己的绑定到arguments或new.target关键字。
  • 箭头函数不能作为方法或构造函数使用。
  • 箭头函数不能作为生成器函数使用。
  • 箭头函数没有名字。

• Q: 如何在JavaScript中定义一个箭头函数？

• A: 在JavaScript中定义一个箭头函数的基本语法是：

(param1, param2, ...paramN) => expression;

其中：

• param1, param2, ...paramN 是参数列表，如果只有一个参数，可以省略括号；如果没有参数或有默认参数，解构参数，或剩余参数，必须使用括号。
• expression 是函数体，如果只有一个表达式，可以省略花括号和return关键字；如果有多个语句，必须使用花括号和return关键字。
• Q: 如何在JavaScript中调用一个箭头函数？
• A: 在JavaScript中调用一个箭头函数的方法和调用一个普通函数的方法一样，只要把箭头函数赋值给一个变量或常量，然后用括号传入参数即可。例如：

// 定义一个箭头函数
const add = (a, b) => a + b;

// 调用箭头函数
const result = add(1, 2); // result = 3