一、什麼是箭頭函式

箭頭函式是ES6新增的一種函式，我們先看看一個簡單的ES5匿名函式。

 function(x){
  	return x*x;
  }

寫成箭頭函式就是下面這個樣子：

(x)=>x*x;

對於習慣ES5的同學，初次認識箭頭函式的感覺，書寫簡潔，但是有點晦澀。我們來分析下：

入參寫在()中，=>指向函式體，對於單行表示式，{...}以及return都省略了

如果是多行表示式，如下：

 let f = function (x,y){
 	if(x>y){
        return x;
 	}else{
 		return y;
 	}
 }

 //等價於
 let f =(x,y)=>{
 	if(x>y){
        return x;
 	}else{
 		return y;
 	}
 }
 

此時，{...}於return是不能省略的。

箭頭函式能使我們的書籤更加簡潔。

setTimeout(function(x,y){
    x+y
},300)
//等價於
setTimeout((x,y) => x+y, 300)
var result = values.sort(function (a, b) {
return a - b;
});
//  等價於
var result = values.sort((a, b) => a - b);

有沒有一些高大上的感覺呢。

二、this的用法

箭頭函式除了對書寫的簡潔外，對this物件也進行了改造。我們先來看個ES5的this用法：

var handle = {
    event: 'click',
    getEvent: function () {
        var b = this.event; // 'click'
        var fn = function () {
           console.log(  this.event); // undefine,this指向window或undefined
        };
        return fn();
    }
};
handle.getEvent()//此時呼叫的物件是window，所以是window.event
 

handle.geEvent()返回的是fn(),此時等價執行window.fn();所以為undefined。

如果要是fn函式中的this直接指向當前的物件handle，我們就需要轉換下：

var handle = {
    event: 'click',
    getEvent: function () {
        var b = this.event; // 'click'
        self = this;//獲取當前的this物件，並傳遞到fn中
        var fn = function () {
           console.log(  self.event); //此時，可以正確的獲取到click
        };
        return fn();
    }
};
//或者用bind繫結this物件
var handle = {
    event: 'click',
    getEvent: function () {
        var b = this.event; // 'click'
        var fn = function () {
           console.log(  this.event); // //此時，可以正確的獲取到click
        }.bind(this);
        return fn();
    }
};
handle.getEvent();
 

我們在用箭頭函式重寫handle

var handle = {
    event: 'click',
    getEvent: function () {
        var b = this.event; // 'click'
        var fn=  ()=>console.log(  this.event);//'click'
        return fn();
    }
};
handle.getEvent();

此時，fn函式體中的this物件，不需要轉換，就是指向當前的handle函式物件。

所以，總結一下，ES5函式中的this指向函式的呼叫者，ES6的箭頭函式中this指向是其函式，是一種詞法作用域。

一直以來this物件一直是一個令人頭痛的問題，在物件方法中使用this，必須非常小心。箭頭函式 ” 繫結 ” this，很大程度上解決了這個困擾。