JavaScript 中的箭头函数：更简洁的函数写法

Source: Dev.to

传统函数语法

function greet(name) {
  return "hello" + name;
}

箭头函数语法

const greet = (name) => {
  return "hello" + name;
};

const greet = name => "hello" + name;

语法拆解

const functionName = (parameters) => {
  // code
};

• const → 通常用于定义箭头函数
• (parameters) → 输入参数
• => → 箭头符号
• {} → 函数体

单参数箭头函数

const greet = name => "hello" + name;

如果函数只有一条返回值的语句，可以省略大括号和 return 关键字。

多参数箭头函数

const add = (a, b) => a + b;

多语句箭头函数

当函数体包含多条语句时，需要使用大括号并显式 return：

const sumAndLog = (a, b) => {
  const result = a + b;
  console.log(result);
  return result;
};

箭头函数与 this 关键字

常规函数

const User = {
  name: "Tony",
  greet: function () {
    return this.name;
  }
};

User.greet(); // returns "Tony"

箭头函数

const User = {
  name: "Tony",
  greet: () => {
    return this.name;
  }
};

User.greet(); // returns undefined

箭头函数 没有 自己的 this；它们会从外围的词法作用域继承 this。

重要要点

• 必须在使用之前定义箭头函数（不像函数声明那样会提升）。
• 它们没有自己的 this、arguments、super 或 new.target。
• 最适合用于非方法函数和需要词法 this 的回调函数。