箭头函数

什么是箭头函数

// 箭头函数语法
// () => {}; // 匿名的箭头函数

// ES6 中 定义一个简单的箭头函数
const sum = (a, b) => {
  return a + b;
};
console.log(sum(2, 3)); // 5

// 等同于ES5中 利用function关键字定义sum函数
var sum = function (a, b) {
  return a + b;
};

console.log(sum(2, 3)); // 5

箭头函数的注意事项

单个参数 ：单个参数可以省略圆括号

// 单个参数
const sum = (x) => {
  return x + 1;
};
console.log(sum(1)); // 2

// 单个参数可以省略圆括号
const sum = (x) => {
  return x + 1;
};
console.log(sum(1)); // 2

无参数或多个参数：不能省略圆括号

// 无参数，不能省略圆括号
const sum = () => {
  return 2 + 3;
};
console.log(sum()); // 5

// 多参数，不能省略圆括号
const sum = (a, b) => {
  return a + b;
};
console.log(sum(2, 3));

单行函数体：可以同时省略 {} 和 return

const sum = (a, b) => {
  return a + b; // 函数体内只有一条语句
};

// 以上单行函数体，可以同时省略 {} 和 return
const sum = (a, b) => a + b;
console.log(sum(2, 3)); // 5

// 多行函数体，不能再简化了
const sum = (a, b) => {
  const add = a + b;
  return add;
};
console.log(sum(2, 3)); // 5

箭头函数和普通函数的区别

区别	说明
this指向	箭头函数中没有自己的 this，箭头函数中的 this 指向箭头函数声明时所在的作用域中的 this
arguments	箭头函数中没有 arguments，如果需要接受对应的实参列表，可以用 rest 剩余参数
构造函数	箭头函数不能用做构造函数，不能使用 new 调用
prototype	箭头函数没有原型对象 prototype 这个属性
super	因为箭头函数不能用做构造函数，也就没有自己的 super
yield 命令	因为箭头函数不能用作 Generator 函数，所以不可以使用 yield 命令