ES6中的箭头函数

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

普通函数分为匿名函数和函数声明两种基本方式；
函数表达式也是一种匿名的函数；

var fun = function() {
      console.log('这是匿名函数');
    }
    fun();

    function fun2() {
      console.log('这是函数声明');
    }
    fun2();

以上是普通函数的两种方式；
我们在声明箭头函数的时候把function给省略掉了，箭头函数也是一种匿名函数的简写方式；

var fun = () => {
      console.log('这是箭头函数');
    }
    fun();

这是箭头函数的声明方式；

2： 箭头函数的传参和普通函数的传参

我们在给普通函树传参的时候会把参数写在（）里面；不管是多个还是单个参数都会写在小括号里面；而代码则写在{}代码域里面，就算是只有一条需求，也会写在代码域里面；
普通函数的单个传参：

function fun(name) {
      console.log(name)
    }
    fun('张三');

普通函数的多个传参：

function fun(name, age) {
      console.log(name, age)
    }
    fun('张三', 18);

如果我们用的是箭头函数的话，单个函数可以直接写在匿名函数的声明后面，如果只有一条需求的话也可以不用写在{}代码域里面；
箭头函数的单个传参：

var fun = name => console.log(name);
 fun('jack');

如果我们没有参数 必须要带小括号；

var fun = () => console.log('我是箭头函数');
 fun();

箭头函数如果要传多个参数的话也跟普通函树一样；多个参数一定要写在=>前面的小括号里面：

var fun = (name, age) => {
      console.log(name, age)
    };
    fun('jack', 18);

这样的话可以进行多个参数传递；

3：箭头函数的返回值

普通函数在设置返回值的时候需要return将需要返回的数据return出去给外边设置变量接受；

var fun = function(a, b) {
      return a + b;
    }
    var result = fun(1, 2);
    console.log(result);

如果只是返回单个值的话，我们要是用箭头函数的话可以不用声明return；

var fun = (a, b) => a + b;
    var result = fun(1, 2);
    console.log(result);

=>后面的数值自动被称为返回值；

4： 箭头函数中的this指向问题；

我们都知道在普通函数里面this的指向一般都是调用者；

let obj = {
      name: 'jack',
      eat: function() {
        console.log(this.name + '在吃饭');
        console.log(this);
      }
    }
    obj.eat();

以上代码中的this指的是obj这个对象；
而箭头函数中的this取决的不是调用者，而是箭头函数所处的环境；

let obj = {
      name: 'jack',
      eat: () => {
        console.log(this);
      }
    }
    obj.eat();

此时的this指的不是obj而是window顶级对象；
所以要是想设置箭头函数一定要考虑到this问题；

5： 箭头函数中的call（），apply（）；

我们都知道call（），apply是可以改变this指向的；

function Person(name, age) {
      this.name = name;
      this.age = age;
    }

    function Son(name, age) {
      Person.call(this, name, age);
    }
    var son = new Son('jack', 18);
    console.log(son);

在箭头函数中call（）和apply（）不会改变this的指向只会当普通的参数传递；
同时箭头函数也不能当构造函数使用，不能使用new；

var Person = (name, age) => {
      this.name = name;
      this.age = age;
    }
    var per = new Person('jack', 18);
    console.log(per);

此时就会出现报错：Uncaught TypeError: Person is not a constructor；
因为箭头函数没有原型属性，也不能被当做构造函数使用；

6： 函数的arguments属性

arguments是一个可以无限接受实参的伪数组，在我们普通函数里面都有一个arguments属性可以接受一切的实参，但是在箭头函里面arguments是一个没有被定义的属性；

function fun() {
      console.log(arguments);
    }
    fun(1, 2, 3, 4, 5, 6);

此时输出的是一个伪数组；
而箭头函数：

var fun = () => {
      console.log(arguments);
    }
    fun(1, 2, 3, 4, 5, 6);

会报一个错误： Uncaught ReferenceError: arguments is not defined
如果我们想对多个实参进行接受的话我们可以采用ES6新增的方法：

var fun = (...con) => {
      console.log(con);
    }
    fun(1, 2, 3, 4, 5, 6);

此时输出的就是一个参数数组；