箭头函数解析

概念

ES6允许使用箭头（=>）定义函数，箭头函数提供了一种更加简洁的函数书写方式，箭头函数多用于匿名函数的定义。

箭头函数写法

1、没有参数,用括号代替

let fun = ()=> "张三"
console.log(fun());//张三

2、一个参数,括号可以省略

let fun1 = arg=> arg
console.log(fun1("张三"))//张三

3、多个参数

let fun2 = (arg1,arg2)=> arg1 + arg2
console.log(fun2(1,3))//4

4、利用箭头语法里隐式返还的时候需要注意对象的情况。

错误写法：

let fun3 = () => {
    name: '张三',
    age: 20
}
console.log(fun3());

这个代码初步感觉是返还一个对象,但是这里的大括号和函数里的大括号在含义上有冲突,系统会认为大括号是函数里的括号,而不是对象里的括号,导致报错
正确写法：

let fun3 = () => ({
    name: '张三',
    age: 20
})
console.log(fun3());//{ name: '张三', age: 20 }

5、箭头函数里没有this绑定

let obj = {
    id: 2,
    fun: function() {
        console.log(this.id); // 输出：2
    }
}
obj.fun()

上面代码可以打印出id为2,this指向了obj,所以this.id可以取得obj.id。如果改成箭头语法会发现,函数中this指向改变了,代码如下：

let obj = {
    id: 2,
    fun: ()=>{
        console.log(this.id); //输出：undefined
    }
}
obj.fun()

这里发现this.id获取不到值,原因是箭头函数没有this绑定,箭头函数中的this会指向最近的上层this,所以这里this的指向是window,所以最终取不到this.id

6、用箭头语法的时候没有隐藏参数arguments的绑定

let fun = (arg1,arg2) => {
    console.log(arguments); // arguments is not defined
    return arg1 + arg2
}
fun()

总结

1、如果形参只有一个，则小括号可以省略；

2、函数体如果只有一条语句，则花括号可以省略，并省略return，函数的返回值为该条语句的执行结果；

3、箭头函数 this 指向声明时所在作用域下 this 的值；箭头函数里没有this绑定。

4、箭头函数不能作为构造函数实例化；

5、不能使用 arguments；

6、箭头函数适合与 this 无关的回调. 定时器, 数组的方法回调

7、箭头函数不适合与 this 有关的回调. 事件回调, 对象的方法