ES6的箭头函数()=>{statement;}
2017-03-25 22:18

ES6的箭头函数

ES6中新增加了一个箭头函数,箭头函数字面理解就是通过箭头来定义函数。

var rd=()=>Math.random();
 console.log(rd());

这是最简单的箭头函数使用方式,箭头函数都是匿名的,所以要用一个变量来引用他。箭头函数分成三部分,箭头左边的是参数,箭头表示是箭头函数,箭头右边的是函数语句。这个语句会以return的方式返回。

var squre=x=>{x*x;};
var squre2=x=>{return x*x;};
//squre:undefined
console.log("squre:"+squre(3));
//squre2:9
console.log("squre2:"+squre2(3));

箭头函数的参数只有一个时,可以省略小括号,没有参数时,小括号必须得有。箭头函数的函数体是在方括号中是,不会自动return返回,需要自己添加return语句。多条语句时,需要使用方括号。

function counttime(){
    this.count=0;
    setInterval(()=>{
        this.count++;
        console.log("count:"+this.count)
    },1000);
}
new counttime();

箭头函数不绑定自己的this对象,箭头函数会捕获它所在的上下文中的this对象,作为自己的this。我们的普通函数中的this是来自于调用者的this对象,这一点是很不同的。上面的代码中,箭头函数捕获了上下文中的counttime对象为this。使用箭头函数来调用定时器时,我们就可以不使用变量作用域链的特性来传递上下文中的this,起到了代码简化的作用。

 function ff(){
     this.name="mooshine";
 }
 ff.prototype.getStr=function(ss){
     var addstr=str=>str+" "+this.name;
     var obj={
         name:"sunshine"
     };
     return addstr.call(obj,ss);
 }
 var f=new ff();
console.log(f.getStr("Hello"));
//Hello mooshine

在对箭头函数使用call,apply方法改变this对象时,无效,只会传递参数,不会改变箭头函数中捕获的上下文this对象。

箭头函数中除了this不同外,它还不拥有普通函数中的arguments对象,所以在箭头函数中不能通过arguments对象来获取参数。

var ff=(age)=>({name:"mooshine",age:age});
console.log(ff(25));

这个代码中{...}表示的是一个对象,而不是语句块,所以要通过小括号包围起来,这样箭头函数才能将它作为对象返回。

var sets= (opts)=>({
    width:opts.width||500,
    height:opts.height||300,
    canmove:opts.canmove||true,
    resize:opts.resize||false
    });
console.log(sets({width:200,height:200}));

我们可以使用箭头函数的这个特点:能够对对象自动赋值计算,来实现这js插件或者组件中对插件参数对象的扩展,而不用使用$.extend对象扩展方法。这个对于插件中的参数赋值来说是一个福音。

箭头函数除了可以在TypeScript中使用,或者对js代码使用Babel插件进行编译的情况下使用外,在微信的小程序中也是可以使用的。在微信小程序中不只可以使用箭头函数,还有好多ES6的特性都是可以使用的。小程序目前算是一个真正可以实践ES6特性语法的地方。


原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(2527)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1