箭头函数=＞

箭头函数是ES6引入的一种更简洁的函数写法。是匿名函数，只能作为表达式的操作数。语法：(参数)=> ｛函数体｝。对比普通函数声明，箭头函数格式更简洁，没有自己的this，不能作为构造函数，没有arguments，没有函数提升。

1、简洁的代码格式

  

   

    

     

    
    

     

      //只有 1个参数时,可以省略(),直接写参数名
     
    
   

    

     

    
    

     

      let double = x=>x+x;
     
    
   

    

     

    
    

     

      //有0个或者多个参数时,参数列表要用()包裹起来
     
    
   

    

     

    
    

     

      let add = (a,b)=>a+b
     
    
   

    

     

    
    

     

      let rand = ()=>Math.random();
     
    
   

    

     

    
    

     

      //函数体只有1条语句时,｛｝和 return 可省略,右边值自动隐式return
     
    
   

    

     

    
    

     

      let double = v=>v+v;
     
    
   

    

     

    
    

     

      //如果语句为多条,函数体需用｛｝包裹,且需手动return
     
    
   

    

     

    
    

     

      let total = v=>{
     
    
   

    

     

    
    

     
    var sum = 0;
     
    
   

    

     

    
    

     
    for(let i = 0;i < v;i++){
     
    
   

    

     

    
    

     

              sum+=i;
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     
    return sum;
     
    
   

    

     

    
    

     

      }
     
    
  
 

2、没有自己的this

箭头函数中访问的 this实际上是其父级作用域中的this，箭头函数本身的this是不存在的。避免了之前先用that=this这种hack写法。同时，使用 bind，call，apply不能修改其this指向。

  

   

    

     

    
    

     

      var obj1 = {
     
    
   

    

     

    
    

     
    age: 1,
     
    
   

    

     

    
    

     
    say: function() {
     
    
   

    

     

    
    

     
        setTimeout(() => {
     
    
   

    

     

    
    

     
            console.log(this,this.age); //objl 1 i
     
    
   

    

     

    
    

     

              },0);
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     

      };
     
    
   

    

     

    
    

     

      obj1.say();
     
    
  
 

3、不能作为构造函数

如果通过new关键字调用，程序会抛出错误。同时也没有原型，不存在prototype这个属性。

  

   

    

     

    
    

     

      var Person = (name) => {
     
    
   

    

     

    
    

     
    this.name = name;
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      var person = new Person("jack");
     
    
   

    

     

    
    

     

      //Uncaught Type Error: Person is not a constructor
     
    
  
 

4、没有自己的arguments

可以使用rest参数代替arguments来访问箭头函数的参数列表。

  

   

    

     

    
    

     

      var foo = (val) => {
     
    
   

    

     

    
    

     
    console.log(arguments);
     
    
   

    

     

    
    

     
    // Uncaught ReferenceError: arguments is not defined
     
    
   

    

     

    
    

     

      };
     
    
   

    

     

    
    

     

      foo();
     
    
  
 

5、箭头函数是函数表达式(函数不提升)

非函数声明，不能像函数声明一样被提升。

  

   

    

     

    
    

     

      //函数声明被提升，可以正常执行
     
    
   

    

     

    
    

     

      console.log(getA)///getA(){}
     
    
   

    

     

    
    

     

      getA()// A'
     
    
   

    

     

    
    

     

      function getA() {
     
    
   

    

     

    
    

     
    console.log('A')
     
    
   

    

     

    
    

     

      }
     
    
  
 

  

   

    

     

    
    

     

      //箭头函数为表达式，提升的是变量getB,赋值为undefined。下一句执行时由于getB不是函数而报错。
     
    
   

    

     

    
    

     

      console.log(getB)// undefined
     
    
   

    

     

    
    

     

      getB();//Uncaught TypeError: getB is nota function
     
    
   

    

     

    
    

     

      var getB = ()=>{
     
    
   

    

     

    
    

     
    console.log('B')
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      //注：普通函数表达式var demo=function(){}跟箭头函数表达式一样，也是提升的变量而不是函数
     
    
  
 

文章来源: root181.blog.csdn.net，作者：前端纸飞机，版权归原作者所有，如需转载，请联系作者。

原文链接：root181.blog.csdn.net/article/details/120106911