现代 JS 讲座：箭头函数

Source: Dev.to

概览

• ES2015 中引入的新语法
• 比普通函数表达式更简洁
• 词法绑定 this 的值，使上下文更易理解
• 始终创建匿名函数

箭头函数表达式（使用 => 编写）的关键特性是它们 词法绑定 this 的值。

基本语法

传统函数表达式

const foo = function() {
  console.log(this);
};

foo();

箭头函数等价写法

const foo = () => {
  console.log(this);
};

foo();

参数规则

• 无参数 – 必须使用圆括号。
• 单参数 – 圆括号可选。

// 无参数
const foo = () => {
  console.log(this);
};

foo();

// 单参数（圆括号可选）
const foo = value => {
  console.log(value);
};

foo('Hello!');

立即调用的箭头函数

(() => {
  console.log('Hello!');
})();

注意：this 绑定

箭头函数会从其所在的词法作用域继承 this。在作为对象方法使用时，这可能导致意外结果。

const objA = {
  value: 'foo! foo!',
  sayHi: function() {
    console.log(this.value);
  }
};

objA.sayHi(); // → 'foo! foo!'

const objB = {
  value: 'bar! bar!',
  sayHi: () => {
    console.log(this.value);
  }
};

objB.sayHi(); // → undefined (or the global object's value)

在 objA 中，this 指向对象本身；而在 objB 中，箭头函数捕获的是外层的 this（通常是全局对象），因此 this.value 并不指向 objB.value。

在使用 Vue.js、React 等框架时，了解 this 的绑定方式有助于保持代码的清晰和可维护性。

参考资料

• MDN – this
• MDN – Arrow Functions