箭头函数
原创
今天我来总结一下ES6 对函数做的一些处理。结合我ES5的函数特征，能够让我们根据实际情况，来很好的完成我们的项目需求。
一、ES6的箭头函数
1. 带参数的箭头函数
let fun = (x) => x
console.log(fun(2)) //2这种写法等同于ES5的
function fun(x){
return x
}
console.log(fun(2)) //22.给参数默认值
let fun = (x = 0,y = 0)=> console.log(x+y) ;
fun(3); // 3
fun(2,3) // 5这种写法等同于ES5的
function fun(x,y){
var x = x || 0;
var y = y || 0;
console.log(x+y);
}
fun(3); // 3
fun(2,3) // 5
是不是简便很多。
3.参数为对象
let fun = ({name,age}) => name+" is "+age+" years old";
let obj = {
name:"king",
age:"23"
}
console.log(fun(obj)) //king is 23 years old
这种写法等同于ES5的
function fun(obj){
return obj.name+" is "+obj.age+" years old";
}
let obj = {
name:"king",
age:"23"
}
console.log(fun(obj)) //king is 23 years old
4.以上我们只在函数体内执行了一个代码语句，如果要执行多个我们需要用 {}
let fun = (x = 0,y = 0)=>{
console.log(x+y);
console.log(x-y);
}
fun(2,3);
5.如果我们要返回（return）的数据是对象我们应该使用 （），否之的话 {} 会被认为是代码块，而且被执行。
let fun = ()=>({name:"jhon",age:23});
console.log(fun()) //返回对象 {name:"jhon",age:23}6.在对象的方法中我们可以这样简化函数
let obj = {
name:"king",
fun(){
alert(1)
}
}
obj.fun(); // 1这种写法等同于ES5的
let obj = {
name:"king",
fun:function (){
alert(1)
}
}
obj.fun(); // 1二、ES6中函数的注意点
1.箭头函数不可以用new 在去实例化对象，如果你这样操作，将会报错
let fun = (x = 0,b = 0)=>{console.log(x+b);};
let funClone = new fun(); // 报错 fun is not a constructo
funClone(2,3)
2.不可以使用arguments对象，该对象在函数体内不存在，如果要用的话，可以用rest参数代替；
3.函数体内的this对象就是定义时所在的对象，而不是使用时所在对象；
var obj = {
name:"king",
fun(){
setTimeout(() => { // 使用箭头函数
console.log(this);
},1000)
},
fuc:function(){
setTimeout(function(){
console.log(this);
},1000)
}
}
obj.fun(); // 返回 obj 对象
obj.fuc(); // 返回window 对象原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
