ES6---es6中函数function的改革

ES6新标对函数的改革绝对让人眼前一亮,箭头函数太有逼格了,参数结合三点运算符,真他么简洁!!!


箭头函数:

function add(x,y){return x+y};
///这是es5中定义函数的写法,es6中我们可以这么搞:
var add=(x,y)=>x+y;
add(1,2);//3,正常运行

var fun1=x=>x+1;
fun1(3);//4,当参数为1个的时候 可以再简单一点,当然复杂函数还是需要括号与大括号的

['a','b','c'].map(x=>x);//["a", "b", "c"]

var fun2=(...args)=>{
    for(let arg of args){
        console.log(arg)
    }
};
fun2(1,2,3);//1,2,3配合rest参数
es6提倡的简洁理念在箭头函数得到最大体现,未来箭头函数一定会替代传统函数….

箭头函数中的this:

let obj1={fun:function(){
    setTimeout(function(){console.log(this)})
}};
obj1.fun();//Window,上例是传统的定义函数,this的指向改为了window,通常情况下,我们都是在setTimeout外面定义that=this来确定指向,解决问题。


obj2={fun:function(){
    setTimeout(()=>console.log(this))
}};
obj2.fun();//Object(),箭头函数下的this指向并没有改变,而是指向obj2,
箭头函数体内的this指向的是定义时所在的对象,而不是执行时所在的对象。箭头函数绑定this的指向,很大程度解决了过去this动态指向的困扰,可以大大减少显示绑定this对象的写法(call,apply,bind)。

es6中函数参数:

function fun1(x='a'){console.log(x)};
fun1();//a,没有参数的时候,依然能够打印出默认值a


let fun2=(x=1,y=2)=>x+y;
fun2();//3,没有参数情况下,参数取默认
fun2(10);//12只有一个参数时,y为默认值
fun2(2,5);//7参数个数等于形参时候,参数取实参
fun2(4,5,6);//9参数数量超标时,行为如ES5


let fun3=function(x=1,y=2){this.x=x;this.y=y}
let newFun=new fun3;
//newFun={x:1,y:2}构造函数也可以设置默认值,注意箭头函数不可以当做构造函数,即使用new命令时会报错

///////////
let fun4=({x,y=2})=>console.log(x,y)
fun4();//报错,因为fun4的参数为一个对象
fun4({});//undefined,2
fun4({x:2,y:4});//2,4
fun4({x:2});//2,2


let fun5=(x,y)=>{let x=5;return x};//报错,let命令不允许重复定义
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值