JS 箭头函数 - Javascript

箭头函数简介

箭头函数是 ECMAScript 6 (ES6) 引入的一种新的函数语法。它具有更简洁的语法和一些特殊的行为，使其成为编写更简洁和易读的 JavaScript 代码的有用工具。箭头函数基于表达式语法，没有自己的 this、arguments、super 或 new.target。箭头函数通常用作匿名函数，但也可以命名和使用。

箭头函数的语法

箭头函数的语法格式如下：

const functionName = (parameter1, parameter2, ..., parameterN) => {
  // 函数体
  return expression;
};

箭头函数的关键点包括：

• 使用 => 符号将参数和函数体分隔开
• 如果只有一个参数，可以省略括号
• 如果函数体只有一行代码并且是返回表达式，可以省略 return 关键字和花括号

以下是一些示例：

// 无参数
const sayHello = () => {
  console.log("Hello!");
};

// 单个参数
const doubleNumber = number => number * 2;

// 多个参数
const addNumbers = (number1, number2) => {
  return number1 + number2;
};

// 单行返回表达式
const multiplyNumbers = (number1, number2) => number1 * number2;

箭头函数的特性

与传统函数相比，箭头函数具有一些特殊的特性：

Lexical this

箭头函数没有自己的 this 值，它继承了外部作用域的 this 值。这意味着在箭头函数内部使用的 this 实际上指向的是包含箭头函数的对象或上下文。

const person = {
  name: "John",
  sayHello: function() {
    setTimeout(() => {
      console.log(`Hello, ${this.name}!`);
    }, 1000);
  }
};

person.sayHello(); // 输出 "Hello, John!"（而不是 "Hello, undefined!"）

没有 arguments 绑定

箭头函数没有自己的 arguments 对象。如果需要访问参数，可以使用剩余参数语法或使用命名参数。

const sumNumbers = (...numbers) => {
  let sum = 0;
  for (let number of numbers) {
    sum += number;
  }
  return sum;
};

console.log(sumNumbers(1, 2, 3)); // 输出 6

不能用作构造函数

箭头函数不能使用 new 关键字调用，并且没有 prototype 属性。因此，箭头函数不能用作构造函数来创建对象实例。

const Person = (name) => {
  this.name = name;
};

// 抛出 TypeError: Person is not a constructor
const person = new Person("John");

不能使用 yield

箭头函数不能用作生成器函数，因此不能使用 yield 关键字。

总结

箭头函数是 ECMAScript 6 引入的一种新的函数语法，具有简洁的语法和一些特殊的特性。它通过继承外部作用域的 this 值、省略 arguments 和无法用作构造函数等特点，使编写 JavaScript 代码更加简洁和易读。

通过使用箭头函数，开发人员可以更有效地编写函数式和声明式风格的代码，尽可能减少样板代码和提高代码可读性。

参考文献：

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions