箭头函数通过省略function和return关键字、自动绑定外层this、简化参数与函数体语法，显著提升回调函数简洁性与可读性，但不可作为构造函数且不适用于需动态this的场景。

箭头函数能大幅简化回调函数的书写，核心在于省略 function 关键字、自动绑定 this、以及在单参数单表达式时可进一步省略括号和大括号。

省略 function 和 return 关键字

传统匿名函数写法冗长：

arr.map(function(x) { return x * 2; });

用箭头函数后，变成：

arr.map(x => x * 2);

当只有一个参数时，括号可省；当函数体是单一表达式时，花括号和 return 也自动省略。

• 无参： () => console.log('hi')
• 单参： x => x + 1（比 function(x) { return x + 1; } 简洁得多）
• 多参： (a, b) => a + b（括号不可省）

自动继承外层 this，避免 .bind() 或 _this = this

普通函数中，回调里的 this 容易丢失（尤其在事件监听或定时器中）。箭头函数不绑定自己的 this，而是沿用定义时所在作用域的 this。

例如在类方法中发起异步请求：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

class User {
  constructor(name) { this.name = name; }
  showName() {
    setTimeout(() => { console.log(this.name); }, 100); // 正确输出 name
  }
}

若用普通函数，需手动绑定：setTimeout(function() { console.log(this.name); }.bind(this), 100) 或提前存 const self = this —— 箭头函数直接规避了这些麻烦。

链式调用中保持简洁可读

配合数组方法（如 filter、map、reduce）时，箭头函数让整条链更紧凑：

users
  .filter(u => u.active)
  .map(u => ({ id: u.id, displayName: u.name.toUpperCase() }))
  .sort((a, b) => b.id - a.id);

每个回调都短小清晰，没有多余语法干扰逻辑意图。如果用传统函数，嵌套括号和 return 会快速拉低可读性。

注意：不能作为构造函数，也不适合需要动态 this 的场景

箭头函数没有 prototype，也不能用 new 调用。同时，它不适合需要根据调用方式改变 this 的场合（比如 jQuery 的事件回调中依赖 this 指向 DOM 元素）。

此时应保留普通函数：

$('#btn').click(function() {
  console.log($(this).text()); // this 是按钮元素
});

换成箭头函数，this 就不再是当前 DOM 元素，而是外层作用域的值，导致出错。