ES6的箭头函数

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第22天，点击查看活动详情

箭头函数

箭头函数的代码规范

先来看看之前的回调函数规范

   var fun=function(item){
       console.log('1111')
   }
   

再来看看新学的箭头函数的代码规范

  var fun2=(item) => { 
      console.log('2222')
  }
  

可能单单从两种方法的代码规范来看，箭头函数并不会比我们普通的回调函数简单，但是下面还有箭头函数的特点。

箭头函数的特点

1. 在箭头函数中他只有一个形参的时候 ()小括号可以省略不写

   var fun2= item => {
       console.log('2222')
   }
   

2. 在箭头函数只有一句代码或者只有返回值的时候 {}大括号可以省略不写，如果是返回值的话return也不用写。还有一种特殊情况，当返回值是一个对象时，在我们简化的时候系统会把对象的大括号当作函数的大括号这样就不行了，所以要在对象的大括号外面再套一个小括号。

   var fun2= item => item*100  //将传入的值乘以100 再将返回值传出来
   

3. 没有arguments(这个特点在箭头函数中也算是一个小小的缺点)，在回调函数中你可以不用写形参，之后将值传进来的时候，函数会自动使用这个伪数组将参数收集起来。在箭头函数中就没有这个伪数组只能将需要的形参都写在函数中。

4.箭头函数中的this是父级作用域的

    <input type='text' id='mytext'>
    
    <script>
         mytext.oninput=function(){
              setTimeout(()=>{
                  console.log(this.value)
              },1000)
         }
         //当在输入框中输入值时，会在1s后在控制台输出
         //之前学过在定时器内的this指向的是window，但是用了箭头函数之后他不会遵循“谁调用我，我就指向谁”，而是指向了他的父级。
    </script>