有人说ES6(ES2015)最具魅力的是箭头函数。但真的,我不这么认为:箭头函数这玩意真是又丑又变扭!

不过,箭头函数确实有它的功能优势:

1、简洁:

(虽然我也不认为这是真的简洁,还是认为它是很变扭的)

看一段代码:

const numbers = [1,2,3];

const event = numbers.filter(function(x){

    return x % 2 === 0;

});

用箭头语法重写是这样的:

const numbers = [1,2,3];

const event = numbers.filter(x => x % 2 === 0);

(真是种稀里糊涂的格式,不易理解 -_-!)

解释:

function关键字被删除,只留下参数,紧跟着的是箭头(=>),然是函数功能体。

如果参数列表中包含多个参数,必须用括号包裹,并用逗号分割。

此外,没有参数时,必须在箭头前用一组空括号:()=>{...}。

当函数的主体只是一行时,可以不使用return,因为它是隐式应用的。

2、绑定的词法作用域

直接用例子来说明:

function DelayedGreeter(name){

    this.name = name;

}

DelayedGreeter.prototype.greet = function(){

        setTimeout(function cb(){

            console.log("hello " + this.name);

        },500);

}

const greeter = new DelayedGreeter("world");

greeter.greet();

在这段代码中,期望输出Hello world,但world参数并未能传到cb函数的,所以输出会是:

不引入箭头函数时,如果想要得到正确的输出,需要进行bind操作:

function DelayedGreeter(name){

    this.name = name;

}

DelayedGreeter.prototype.greet = function(){

        setTimeout( (function cb(){

            console.log("hello " + this.name);

        }).bind(this) ,500);

}

const greeter = new DelayedGreeter("world");

greeter.greet();

但如果使用箭头函数,由于它具有绑定作用域的特性,可以较方便的实现上述同样的效果:

function DelayedGreeter(name){

    this.name = name;

}

DelayedGreeter.prototype.greet = function(){

        setTimeout( ()=> console.log("hello " + this.name) ,500);

}

const greeter = new DelayedGreeter("world");

greeter.greet();

在这个方面的应用确实是方便了一些。