美文网首页
箭头函数

箭头函数

作者: L楠 | 来源:发表于2017-08-28 11:12 被阅读0次

    箭头函数的产生有两个目的:更简洁的语法和父作用域共享关键字this

    箭头函数基本用法

    ES6中新增的=>来定义简单函数
    如:

    x=>x+1
    

    相当于

    function(x){
       return x+1;
    } 
    

    如果没有参数或者多个参数,需要使用()

    (a,b)=>a+b
    相当于
    (a,b)=>{
          return a+b;
    }
    
    var log= () =>{
         alert('no param')
    }
    

    当需要编写一个简单的参数函数时,可以采用箭头函数来书写,标识名=>表达式。这样省略function和return的输入,还有括号,分号等。

    //es6
    var total = values.reduce((a,b) => a + b,0);
    //es5
    var total = value.reduce(function (a,b){
    return a+b;
    },0;
    

    除了函数样式编写,箭头函数还可以包含区域块语句而不仅仅是单一表达式:

    //es5
    $("#a-btn").click(function (event){
            playTrumpet();
            fireConfettiCanno();
    });
    //es6
    $("#a-btn").click(event => {
           playTrumpet();
           fireConfettiCanno();
    });
    

    箭头函数中的this

    箭头函数没有自己的this值,其this值是通过继承其他传入对象而获得的。

    JS中处理this:
    {
        ···
       addAll: function addAll(pieces){
               var self=this;
                _.ech(pieces,function(piece){
               self.add(piece);
          });
       },
       ···
    }
    
    ES6中this

    遵循以下原则
    1.使用非箭头函数处理object.methos()语法调用的方法。因为他们会接受到来自调用者的有意义的this值
    2.在其他场合都使用箭头函数

    {  
      ...  
      addAll: function addAll(pieces) {  
        _.each(pieces, piece => this.add(piece));  
      },  
      ...  
    }  
    
    

    相关文章

      网友评论

          本文标题:箭头函数

          本文链接:https://www.haomeiwen.com/subject/vvmwdxtx.html