深入理解ES6中的箭头函数

    前期一直没有理解ES6中的箭头函数，想着干嘛非要写成=>这样的形式，非要省略function。这期内容，本人又重新学习一边，着重详细理解箭头函数。

   在ES6之前，函数中改变this指向，需要依赖于call();apply();bind();其中call()与apply（）能调用函数，并且改变this指向，并且call()具有继承的功能，而bind比较特殊，它只能改变this的指向，不能够调用函数，但是它能将函数变成一个新的函数做为参数进行传递，并且需要一个变量接收新的函数。而在ES6中，改变了这一现象。

1、首先我们定义一个正常点的函数，案例中我们使用赋值式的函数，代码片段如下所示：

var test = function(){
        console.log("我是赋值函数，将函数赋值给test变量");
    }
    // 用户可以执行test变量
    test() //控制台打印的结果为   我是赋值函数，将函数赋值给test变量。

/接下来我们说箭头函数，首先定义好变量，将其赋值给变量，直接省略function这个关键字，后面直接跟上=>,后面再跟上{}，写成代码格式如下所示:

var test1 =()=>{
        console.log("我是箭头函数的写法");
    }

    test1()

上面的两个代码块都能执行，有都能调用。

2、接下来我们来讲解下箭头函数的特点，以及箭头函数有什么注意的地方。

2.1 箭头函数中小括号可以省略

()可以省略，但是得有条件，下面我将代码简化过程进行演示

 正常情况下，我们定义一个函数

var test = function(){
        console.log("我不是简写的函数");
      }

第一次简化，省略去关键字function

var test = () =>{
         console.log("我省略了关键字function");
      }

要想省略()是有条件的，如果小括号中接收的是一个形参，而且参数只有一个的情况下，小括号是可以省略的，直接书写形参，代码如下:

  var test = (a) =>{
        console.log(111,a);
      }
    //   简化省略小括号
      var test = a =>{
        console.log("我是省略小括号后的",a);
      }
    
       test("箭头函数省略小括号")

控制台输出结果为

注意，如果函数参数中有两个或多个的时候，小括号是不能省略的，代码块如下所示，编辑时候，代码就开始出错了 ，如下图所示

 加上小括号，代码就不会报错提示：

总结：只有一个形参 的时候，小括号才能省略。

2.2箭头函数中的{}是否可以省略？

省略{}后的方式如下图所示：

注意：上面我们提到过，当返回值是一句代码或者只有返回值的时候可以省略{}，但是在实际开发过程中，我们可能遇到函数的返回值可能是一个对象，那么此时该如何省略{}呢？

上面代码中，我们定义了一个函数，函数的返回值是一个对象，打印结果为对象的key:value, 我们要简写省略{}，此时代码打印结果为undefined，这是因为浏览器不能识别箭头函数后面的{}，究竟是函数中自带的花括号还是属于对象本身的{}，代码如下所示：

 为了解决这样的情况，当箭头函数返回值是一个对象的时候，需要在对象{}前加（）即可，写法如下图代码

3、箭头函数的第三个特点没有arguments

 在箭头函数中没有arguments，在前面我们并没有说明这个特殊的数组，在这里我们说明一下

  首先写一个函数，这个函数是赋值式的或者声明式的都可以的,代码如下所示：

上诉代码打印结果是没有任何问题的，假设函数中，不写形参的情况下，我们调用该函数，并传入实参，该如何获取到传入的实参值呢？如果函数中没有形参是没办法获取到传入的实参的。

在函数的内部，函数本身自建了一个特殊的变量叫arguments,用户无需定义，打印结果是一个数组结构(称为伪数组)

 

 

 上面的代码中是函数内部自建的一个特殊变量，能够在函数没有形参的特殊情况下，能够拿到调用函数传入的实参。

当然，有些初入行的小伙伴可能会想，如何将arguments伪数组转换成一个真数组呢？

此时只需要使用Array.from(arguments),它能够强行的将一个伪数组转换成一个真实的数组

 

 打印结果显示为一个真正的数组形式。

上面的讲解，是对Arguments知识点做一个讲解，接下来我们回归到箭头函数中，在箭头函数中，是没有arguments的，代码如下所示：

上述代码中，是在箭头函数中，我们使用arguments，打印结果报错，所以拿不到arguments，如果一定非要拿到调用传入的实参，那么只能在箭头函数中写入形参。 

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

    箭头函数this的指向问题，在箭头函数中this是父级作用域的。

我们继续案例方式讲解，我们首先创建一个输入框，获取到输入框中每次输入的内容。

 这里面的this指向的为输入框每次输入的值，

接下来我们在上述代码块中，再加入一个定时器，我们需要延时1s中之后，将其结果打印出来,代码如下：

在定时器中的this指向结果显示为window ，当我们写成this.value时候，打印的结果则为undefined

那小伙伴一定有疑惑，为什么this.value打印的结果就是undefined，而不是文本框输入的内容呢？

前面代码中我们已经演示过了，在定时器函数中，我们打印this确实是指向window对象的，但是我们展开window对象里面却没有value这个属性，所有当this.value时候，打印结果为undefined。

在没有学习ES6之前，我们解决上述问题获取到value值的时候，我们一般都是定义一个临时变量that，先把定时器函数外部的this暂时存一份，代码演示如下所示：

 

举上面这个例子，是想说明，当我们有时候需要访问到当前这个函数外面的作用域的时候，就可以将外面的函数的this暂时存一下。

但是当我们使用箭头函数的时候，就没有那么麻烦，不需要再定义变量了，因为此时this指向的是函数外面的这个函数。箭头函数书写代码如下图所示：

在浏览器端输入内容，也能正常获取到输入的值。

总结：箭头函数中，this是当前函数外面父级的作用域内的。

以上就是本人重学后对箭头函数的理解，如有不足之处，还请大佬批评指正。