ES6 箭头函数你正确使用了吗

博客说明

文章所涉及的资料来自互联网整理和个人总结，意在于个人学习和经验汇总，如有什么地方侵权，请联系本人删除，谢谢！

说明

在ES6中允许使用“箭头”（=>）定义函数，所以在我们后续写代码的过程中出现的很多的箭头函数，因为真香！但是也带来的一些问题，灵魂拷问，你真的了解箭头函数吗？因为不敢肯定作答，故此书。

箭头函数

一个简单箭头函数

// es6
const hello = item => item;

// es5 上面的代码等同于
const hello = function (item) {
  return item;
};

用法(三大如果)

如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。

const hello = () => 'hello';

const sum = (num1, num2) => num1 + num2;

如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。

const sum = (num1, num2) => { 
  let num = 0; 
  if(num1 && num2){
    num = num1 + num2;
  }
  return num;
}

如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。

const getInfo = id => ({ id: id, name: "hello" });

四大注意点

以下四点可能被无数次的提及，并且出现在各大面试题当中，不错，今天又来了一次。

箭头函数没有自己的this对象
不可以当作构造函数，不可以使用new命令
不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替
不可以使用yield命令，因此箭头函数不能用作 Generator 函数

箭头函数的this指向

对于普通函数来说，内部的this指向函数运行时所在的对象。箭头函数没有自己的this对象，内部的this就是定义时上层作用域中的this。

箭头函数内部的this指向是固定的，相比之下，普通函数的this指向是可变的。

将ES6转成ES5

发现其实只是所谓的箭头函数的this只是从外面”借“来的

// ES6
function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

// ES5
function foo() {
  var _this = this;

  setTimeout(function () {
    console.log('id:', _this.id);
  }, 100);
}

在setInterval中，其实是没有this.s2的，所以它的值不会变化。

function test() {
  this.s1 = 0;
  this.s2 = 0;
  // 箭头函数
  setInterval(() => this.s1++, 1000);
  // 普通函数
  setInterval(function () {
    this.s2++;
  }, 1000);
}

s1 // 1
s2 // 0

普通函数修改之后可以修改s2

// 普通函数
setInterval(function () {
    let _this = this;
  _this.s2++;
}, 1000);

在这里也能看到箭头函数的this的指向，可以发现箭头函数非常适合来做回调

不能作为构造函数

不能作为构造函数，这个好理解。因为箭头函数根本没有自己的this，拿甚构造？所以箭头函数也就不能用作构造函数。也不能使用new关键词。

不可以使用arguments对象

像this一样，arguments指向外层函数的对应变量，像类似的兄弟还有super、new.target

function hello() {
  setTimeout(() => {
    console.log('args:', arguments);
  }, 1000);
}

hello(1,2,3,4)
// args: [1, 2, 3, 4]

也因为这个this的问题，箭头函数也不能用call()、apply()、bind()这些方法去改变this的指向，因此箭头函数的this是”静态“的。

箭头函数的好与坏

说到箭头函数的this，导致这个没有那个没有，其实不然，在ES6之前的this对象一直是一个令人头痛的问题，使用时小心翼翼，回调一多，代码就糊了。正是因为这个”静态“的this的出现，改善了这一些问题。

在使用箭头函数的时候，要合理的利用箭头函数的优劣，选择合适的场景。在定义对象方法和动态绑定this的时候不要使用箭头函数。

感谢

万能的网络
阮一峰的ES6教程
以及勤劳的自己，个人博客，GitHub

ES6 箭头函数你正确使用了吗