技術標籤：vuejsjavascript

#Java Script的箭頭函式是ES6標準中的，主要是對函式書寫的一種簡化。

先看下普通函式與箭頭函式的書寫形式

寫箭頭函式，我們記住一個順序就好，引數、箭頭、函式體、 這個順序記住就足夠了，引數、箭頭、函式體、這三個是必須的，函式名可以沒有，但這三項必須有，一些簡寫的方式也是簡寫這三項裡的東西。
簡寫
1、只有一個引數時，() 可省略

//不簡寫
var demo = (x) =>{
    console.log(x);
}

//簡寫
var demo = x =>{
    console.log(x);
}

2、函式體只有一句時， {} 可以省略

//不簡寫
var demo = (x) =>{
    console.log(x);
}

//簡寫
var demo = x => console.log(x);

3、函式體只有一條返回語句時，{} 和 return 都可以省略

//不簡寫
var demo = (x) => {
     return x;
}

//簡寫
var demo = (x) => x;   

//注意別寫成這樣  
var demo = (x) =>{ x };  
//或者 這樣  
var demo = (x) => return  x;  
//要省略就都省略，不省略就都不省，別省一半,不然會出錯的。
 

注意：

箭頭函式放 引數 的地方就在 () 內，
沒有引數，() 必須寫，
一個引數，() 可寫可不寫，
多個引數，() 必須寫。

箭頭函式放 函式體 的地方在 {}內，
函式體 就 一句 {} 可寫可不寫，
函式體 不止一句，{} 必須寫。

如果不知道，() {} 寫不寫，該不該省略，那就寫，寫了不會錯。

下面介紹普通函式與箭頭函式的區別

1、箭頭函式沒有自己的this。箭頭函式會捕獲其所在上下文的 this 值，作為自己的 this 值。
2、箭頭函式 this 不可變。call()、apply()、bind()、這些方法也 無法改變 箭頭函式 this 的指向。
3、箭頭函式 不能用 new 關鍵字來例項化物件，不然會報錯。

4、箭頭函式沒有arguments物件。

1、箭頭函式沒有自己的this。箭頭函式會捕獲其所在上下文的 this 值，作為自己的 this 值。

window.name = 'window';
var obj = {
    name:'obj',
    show_name:function (){
        function fn (){
            console.log(this.name);
        }
        fn();
    },
}
obj.show_name();  // window

宣告一個 obj 物件，有一個name屬性 與 show_name方法，上面這段程式碼，我的本意是想顯示 obj物件的name， 但是沒和我想的一樣，show_name直接呼叫者是obj，fn函式屬於巢狀函式沒有直接呼叫者，this指向window，所以一般我們會用 一個變數 self 或者 that 之類的留住this,像這樣

window.name = 'window';
var obj = {
    name:'obj',
    show_name:function (){
        //留住this
        var that = this;
        function fn (){
            console.log(that.name);
        }
        fn();
    },
}
obj.show_name();  //obj

通常來說，箭頭函式內部的this就是外層程式碼塊的this

window.name = 'window';
var obj = {
    name:'obj',
    show_name:function (){
        var fn = () => {
            console.log(this.name);
        }
        fn();
    },
}
obj.show_name(); //obj

2、箭頭函式 this 不可變。call()、apply()、bind()、這些方法也 無法改變 箭頭函式 this 的指向。

window.name = 'window';
var obj = {
    name:'obj',
}
function show_name(){
    //這裡 show_name 是一個普通的全域性函式，所以他的this指window
    console.log(this.name);
}
//用了 call 方法，把 show_nam 的this 指向了 obj 物件
show_name.call(obj);  //obj

箭頭函式 this 不可變

window.name = 'window';
var obj = {
    name:'obj',
}
var show_name = () => {
    //這裡 show_name 是箭頭函式，他的this指window，並且不會變
    console.log(this.name);
}
//用了 call 方法，但是 this 沒變，所以列印了 window
show_name.call(obj);  //window

3、箭頭函式 不能用 new 關鍵字來例項化物件，不然會報錯，箭頭函式的this 不可變，new 也改變不了 this的 指向，而且更為重要的是，箭頭函式內部並沒有 [[Construct]] 方法，所以會沒有原型屬性（prototype），所以箭頭函式沒法當建構函式。

4、箭頭函式沒有arguments物件，不能通過arguments物件訪問傳入引數，但是可以用rest引數實現

var demo = (...theArgs) => theArgs;
demo(1,2,3); //[1,2,3]

總結完畢，下次遇到箭頭函式應該不會被this困擾了。