ES6 箭头函数：告别 `this` 的困扰

ES6 箭头函数：告别 this 的困扰

引言

ES6 箭头函数（=>）不仅是语法糖，更解决了 JavaScript 中 this 绑定的核心痛点。本文将揭示其四大实战价值，助你写出更简洁可靠的代码。

---

1. 极简语法：告别 function 冗余

单参数、单表达式时可省略括号和 return：

// 传统写法  
const squares = [1, 2, 3].map(function(x) {
    
  return x * x; 
});

// 箭头函数  
const squares = [1, 2, 3].map(x => x * x); // 代码量减少 40%

---

2. 词法 this：根治绑定问题

传统函数 的 this 由调用者决定，常需 bind() 救场：

function Timer() {
   
  this.seconds = 0;
  setInterval(function() {
   
    this.seconds++; // 错误！这里的 this 指向 window
  }, 1000);
}

箭头函数 继承外层 this，彻底避免陷阱：

setInterval(() => {
   
  this.seconds++; // 正确指向 Timer 实例
}, 1000);

---

3. 隐式返回：简化回调地狱

适合单行操作的链式调用（如 Promise、Array方法）：

// 传统多层回调  
fetch(url)
  .then(function(res) {
    
    return res.json() 
  })
  .then(function(data) {
   
    console.log(data);
  });

// 箭头函数扁平化  
fetch(url)
  .then(res => res.json())
  .then(data => console.log(data));

---

4. 避免意外行为：更安全的函数

箭头函数不可作为构造函数（无 prototype 属性），且无 arguments 对象：

const Foo = () => {
   };
new Foo(); // TypeError: Foo is not a constructor

// 需获取参数时改用 Rest 参数  
const log = (...args) => console.log(args);