ES6基础入门教程（七）箭头函数

箭头函数，懒人的勋章

---

很多时候，我懒得去写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()