箭头函数 - Javascript

箭头函数是ES6（ECMAScript 2015）中引入的一种新的函数语法形式。相较于传统函数，箭头函数具有更简洁的语法和更方便的this绑定。

简洁语法

箭头函数的语法比传统函数更加简洁，可以在不使用function关键字的情况下进行定义：

// 传统函数定义
function add(a, b) {
  return a + b;
}

// 箭头函数定义
const add = (a, b) => a + b;

可以看到，我们用=>替代了传统函数的function关键字，同时如果只有一句表达式的函数体，我们可以在不使用return关键字的情况下进行返回。

另外，如果箭头函数接受单一参数，我们甚至可以省略参数列表中的括号：

// 传统函数定义
function double(x) {
  return x * 2;
}

// 箭头函数定义
const double = x => x * 2;

箭头函数的this

在传统函数定义中，this关键字是在函数运行时动态绑定的。这意味着，在不使用call、apply等方法调用时，this关键字总是指向调用该函数的对象。但是，在嵌套函数内部，this关键字可能会因为函数嵌套而出现歧义。例如以下情况：

const obj = {
  age: 21,
  output: function() {
    setTimeout(function() {
      console.log(this.age);
    }, 1000);
  }
};

obj.output(); // undefined

在这种情况下，setTimeout函数中的this指向的是全局对象（浏览器中一般是window对象），而非我们期望的obj对象。为了解决这个问题，传统方法是在函数的外部保存this到一个变量中：

const obj = {
  age: 21,
  output: function() {
    const that = this;
    setTimeout(function() {
      console.log(that.age);
    }, 1000);
  }
};

obj.output(); // 21

在箭头函数语法下，函数体内的this关键字会指向定义该函数的执行上下文的this，而非调用该函数时的this。这使得在嵌套函数中使用this变得更加方便：

const obj = {
  age: 21,
  output: function() {
    setTimeout(() => {
      console.log(this.age);
    }, 1000);
  }
};

obj.output(); // 21

总结来说，箭头函数表达更加简洁明了，而且在使用过程中避免了传统函数中“this”关键字的歧义。但是，注意箭头函数的使用场合，尤其是在需要访问调用对象的时候。

参考资料

• Arrow functions - JavaScript | MDN