箭头函数,懒人的勋章
很多时候,我懒得去写function。这种蹩脚的写法让我的代码看起来非常的不高级。
因为只要一个人上过初中他就能从字面上翻译我的代码...
所以es6中增加了新的function写法,箭头函数。让你可以省略function这一串字符,甚至连方法里面的return都可以省略。
来看示例
const fun1 = x=>x*2;
console.log(fun1(2)) // 打印4
从例子中可以发现,前面的x是我们传进去的参数,后面的x*2是返回值。
他其实就相当于是:
function fun(x){
return x*2;
}
是不是非常简单?
但是它有三种情况需要注意一下:
// 没有参数 也需要把()给写上,否则会报错
const fun = ()=>{
console.log("没有参数");
}
// 有参数
const fun2 = (x,y)=>{
console.log(x);
console.log(y);
}
// 可变参数
const fun3 = (x,y,...z)=>{
console.log(x);
console.log(y);
//console.log(z);
for(let i of z){
console.log(i);
}
}
fun3("hello","world",1,2,3,4,5)
此时注意如果你返回的是一个对象,需要用括号包裹起来:
const fun1 = ()=>({a:1});
console.log(fun1())
如果你以为箭头函数仅仅就是一个缩写,那你就错了, 箭头函数还有一个犀利的地方再于,他解决了一个es5中的著名bug。
es5中this的指向错误问题
请看代码:
//注意 在function作用域,this默认指的是function本身,却不是对象本体
//在这个情况下它应该指它的父级
const myNum={
num:10,
numFun:function(){
let num = this.num;
console.log(this.num); //10
let numf=function(){
console.log(this.num); //undefined
let numz=this.num;
console.log(numz); //undefined
}
numf();
}
}
myNum.numFun()
箭头函数中this还是指父级本体,而不是function函数作用域
更何况我还经常使用拼音(因为我懒得去百度机翻)。
const myNum={
num:10,
numFun:function(){
let num = this.num;
let numf=()=>{
let numz=this.num;
console.log(numz);//10
}
numf();
}
}
myNum.numFun()
网友评论