箭頭函數(shù)，懶人的勛章

很多時(shí)候，我懶得去寫(xiě)function。這種蹩腳的寫(xiě)法讓我的代碼看起來(lái)非常的不高級(jí)。
因?yàn)橹灰粋€(gè)人上過(guò)初中他就能從字面上翻譯我的代碼...

所以es6中增加了新的function寫(xiě)法，箭頭函數(shù)。讓你可以省略function這一串字符，甚至連方法里面的return都可以省略。

來(lái)看示例

const fun1 = x=>x*2;
console.log(fun1(2)) // 打印4

從例子中可以發(fā)現(xiàn)，前面的x是我們傳進(jìn)去的參數(shù)，后面的x*2是返回值。

他其實(shí)就相當(dāng)于是:

function fun(x){
    return x*2;
}

是不是非常簡(jiǎn)單？

但是它有三種情況需要注意一下：

// 沒(méi)有參數(shù) 也需要把()給寫(xiě)上，否則會(huì)報(bào)錯(cuò)
const fun = ()=>{
    console.log("沒(méi)有參數(shù)");
}
// 有參數(shù)
const fun2 = (x,y)=>{
    console.log(x);
    console.log(y);
}
// 可變參數(shù)
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)

此時(shí)注意如果你返回的是一個(gè)對(duì)象，需要用括號(hào)包裹起來(lái)：

const fun1 = ()=>({a:1});
console.log(fun1())

如果你以為箭頭函數(shù)僅僅就是一個(gè)縮寫(xiě)，那你就錯(cuò)了， 箭頭函數(shù)還有一個(gè)犀利的地方再于，他解決了一個(gè)es5中的著名bug。

es5中this的指向錯(cuò)誤問(wèn)題

請(qǐng)看代碼：

//注意 在function作用域，this默認(rèn)指的是function本身，卻不是對(duì)象本體
//在這個(gè)情況下它應(yīng)該指它的父級(jí)
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()

箭頭函數(shù)中this還是指父級(jí)本體，而不是function函數(shù)作用域
更何況我還經(jīng)常使用拼音（因?yàn)槲覒械萌グ俣葯C(jī)翻）。

const myNum={
    num:10,
    numFun:function(){
        let num = this.num;
        let numf=()=>{
            let numz=this.num;
            console.log(numz);//10
        }
        numf();
    }
}
myNum.numFun()