本文共 930 字，大约阅读时间需要 3 分钟。

箭头函数是 JavaScript 中一种简化函数定义的方式，通过这种方式可以更简洁地表达函数逻辑。

箭头函数的简化性

箭头函数的核心特点是其语法简洁。传统的函数定义需要明确写出函数体和返回值，而箭头函数则能够通过简短的代码实现同样的效果。

() => {
  return value;
}
const fn = () => {
  return value;
}

在箭头函数中，如果函数体中只有一句代码且该代码的执行结果就是函数的返回值，函数体的大括号可以省略。例如：

const sum = (n1, n2) => n1 + n2;

如果函数只有一个参数，可以省略小括号：

const fn = v => v;

这种简化使得代码更加简洁易读，同时也减少了错误率。

this关键字的绑定问题

箭头函数的另一个特殊之处是其对this关键字的处理方式。箭头函数本身不具备this绑定机制，其this关键字将指向函数定义位置的上下文。

示例1

function fn() {
  console.log(this);
  return () => {
    console.log(this);
  };
}
const obj = { name: 'zhangsan' };
const resFn = fn.call(obj);
resFn();

在上述代码中，定义的函数fn是一个普通函数，通过fn.call(obj)将this绑定到obj对象上。当resFn执行时，它内部的箭头函数的this仍然指向obj。

示例2

var obj = {
  age: 20,
  say: () => {
    console.log(this.age);
  }
};
obj.say(); // 输出 undefined
var obj = {
  age: 20,
  say: function() {
    console.log(this.age);
  }
};
obj.say(); // 输出 20

在箭头函数版本中，this指向全局对象（即window），这与普通函数的行为有所不同。这种特性需要开发者特别注意，尤其是在涉及对象方法的场景中。

转载地址：http://nuch.baihongyu.com/