学习箭头函数之前,先普及一个小知识点。
function show(a=1){
let a = 2;
console.log(a);
}
show();
上面的代码告诉我们函数的参数默认已经被定义了,一经声明,就不能再用let或者const进行声明了,只能用var。下面一起来看箭头函数吧。
//普通函数的写法
function show(){
return 1;
}
show();
//箭头函数的写法
let show = () => 1;//箭头的左边是参数右边是返回值
console.log(show());
如果想要在函数里面写语句的时候,写法是这样的:
let show = (a=1,b=2) => {
console.log(a,b);
}
show();
箭头函数在写法和普通桉树除了写法不用之外。还有三点不同
let json = {
name: 'Cyril',
show: function(){
setTimeout(function(){
console.log(this.name);//控制台什么都没输出
},1000);
}
}
json.show();
这个例子大多是在vue等框架下开发遇到的问题,因为this指向是当前函数,先要让他指向外面的json对象,就还要在外面进行转换,太麻烦,而箭头函数则不同。
let json = {
name: 'Cyril',
show: function(){
setTimeout(() => {
console.log(this.name); //Cyril
})
}
}
json.show();
第一个不同之处就是箭头函数里的this指向的是定义函数所在的对象,而不是运行时所在的对象。
第二个就是箭头函数里面不能使用arguments,用了就是is not defined
解决办法:扩展运算符(本章的第五小节)
let show = (...a) => {
console.log(a); //[1,2,3,4,5]
}
show(1,2,3,4,5);
第三个事箭头函数不能当作构造函数来用
let Show = () => {
this.name = 'Cyril';
}
let a = new Show();
console.log(a.name); //Show is not a constrator
GitHub个人主页 :https://github.com/Cyrildog
有些鸟儿天生即使关不住的,他们的羽毛太鲜明,歌声太甜美。也太狂野了,所以你只能放他们走,否则那天你打开笼子喂它们时,他们也会想办法扬长而去。
[图片上传失败...(image-11e537-1528698466423)]