ES6系列教程第八篇--箭头函数详解

一、什么是箭头函数

箭头函数是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，很大程度上解决了这个困扰。

上一篇：ES6系列教程第七篇--Module详解