简单理解ECMAScript2015中的箭头函数新特性

箭头函数（Arrow functions）,是ECMAScript2015中新加的特性，它的产生，主要有以下两个原因：一是使得函数表达式（匿名函数）有更简洁的语法，二是它拥有词法作用域的this值，也就是说它跟父作用域共享this，不会新产生自己作用域下的this, arguments, super 和 new.target 等对象。

使用箭头函数特性

在JavaScript代码中，函数无处不在。假设页面上有一个特定的按钮，它的id是‘clickMe’,点击它后，页面弹出“Hello，Arrow functions!”,为实现这个效果，我们会像下面这样编写JavaScript代码：

    $(function(){

        $('#clickMe').click(function(){

                alert('Hello，Arrow functions!');

        })

    })

以上是传统的JavaScript写法，给click方法传入一个函数作为参数，这个函数通常都需要按照以下格式输入：function(){}。使用箭头函数后，代码如下：

    $(function(){

        $('#clickMe').click(()=>{alert('Hello，Arrow functions!')});

    })

上面的例子比较简单，再来看一个Promise链的例子：

    function getUserInfo(id){

        return getUsers(id).

                then(function(users){return users[0]}).

                then(checkUser).

                then(function(user,userInfo){return userInfo }).

                catch(function(error){console.log(error.message)})

    }

使用箭头函数简化上面的例子，代码如下：

    function getUserInfo(id){

        return getUsers(id).

            then(users => users[0]).

            then(checkUser).

            then((user,userInfo)=>userInfo).

            catch(error=>console.log(error.message))

    }

从简化后的代码来看，不难发现，所有回调函数中的function 和 {}不见了，而且回调函数都在一行表示，当只有一个参数时，（）也消失了；由于{}消失了，里面的return也消失了，代码看起来更加清晰、简洁了。前面提到单行表示回调函数的时候，{}被省略了，假如这时候我们要返回一个对象（包括空对象）的话，该怎么处理呢？这是个坑，一般按如下方式书写代码：

    const emptyObject = ()=>({})

箭头函数里面的this

开头那里已经提到了，箭头函数没有自己的this值，它跟父作用域共享this,箭头函数内部也没有constructor方法，也没有prototype,所以箭头函数不支持new操作。

在箭头函数之前，每个新定义的函数都有自己的this值，例如，构造函数的this指向一个新的对象，如果是‘严格模式’，则this值为undefined,如果函数作为对象的方法被调用，则该函数的this指向了那个调用它的对象。在JavaScript面向对象编程中，this的指向是让新手很头疼的问题。

function Person()｛

    //构造函数的this指向实例对象自己

    this.age = 25;

    setInterval(function growUp(){

        //在非严格模式下，growUp函数定义了其内部的this,其指向window对象，不同于构造函数Person()定义的this

        this.age++;

    },1000);

}

var p = new Person();

在箭头函数之前，我们是如何使growUp函数内部的this也指向构造函数Person（）的实例对象的呢？如下：

function Person() {

    var self = this;

    self.age = 25;

    setInterval(function growUp(){

        self.age++;

    });

}

var p = new Person();

也就是通过新增一个变量来指向期望的this对象，除此之外，还可以使用 bind 函数，把期望的 this 值传递给 growUp() 函数。

function Person() {

    this.age = 25;

    setInterval(function growUp(){

        this.age++;

        console.log(this.age);

    }.bind(this),1000);

}

var p = new Person();

由于箭头函数会捕获其所在上下文的this值，来作为自己的this值，所以我们可以这样修改上述例子的代码：

function Person() {

    this.age = 25;

    setInterval(()=>{

        this.age++;//这里的this也指向Person对象

    },1000);

}

使用 call 或 apply 调用

箭头函数的 this 始终指向函数定义时的 this，而非执行时。下面看一个试图改变箭头函数 this 指针的例子：

var x = 1,

o = {

    x : 10,

    test : () => this.x

};

o.test(); // 1

o.test.call(o); // 仍旧是1

由于 this 已经在词法层面完成了绑定，通过 call() 或 apply() 方法调用一个函数时，只是传入了参数而已，对 this 并没有什么影响：

var adder = {

  base : 1,

  add : function(a) {

    var f = v => v + this.base;

    return f(a);

  },

  addThruCall: function(a) {

    var f = v => v + this.base;

    var b = {

      base : 2

    };

    return f.call(b, a);

  }

};

console.log(adder.add(1));         // 输出 2

console.log(adder.addThruCall(1)); // 仍然输出 2，而不是3

2016年8月

日

一

二

三

四

五

六