ES6特性之：箭头函数

一斤代码

发布于 2018-08-21 10:39:58

3000

发布于 2018-08-21 10:39:58

文章被收录于专栏：大前端开发

在ES6的所有新特性中，箭头函数(Arrow Fucntion)算是我用的最频繁的特性之一了。

它是函数

那什么是箭头函数呢？首先，它得有“函数”的功能。我们平时定义一个函数，大致是这种样子的：

function greeting(name) {
  return "Hello," + name;
}

我们可以使用箭头函数来定义一个与它大致等价的函数：

const greeting = (name) => {
  return "Hello," + name;
}

更进一步，这个箭头函数还可以简化，在箭头后面只使用一个表达式：

const greeting = (name) => "Hello," + name;

我们还可以在使用匿名函数的场景使用箭头函数，比如：

[1, 2, 3].map((item) => item * item);
//结果：[1, 4, 9]

它没有自己的this绑定

我们来看一个我们经常会遇到的问题：

var person = {

    _name: "Kevin",

    intro: function () {
        console.log(this._name);   // Kevin

        var getMyIntro = function () {
          console.log(this._name);  // undefined

          return "My name is " + this._name;
        };

        return getMyIntro();
    }
};

person.intro(); //My name is undefined

在这段代码中，我们期望的结果是：My name is Kevin，但是它的结果却是：My name is undefined。在一个对象的成员函数中的内嵌函数，它的this对象并不是指向成员函数所指向的this对象（也就是这个例子中的person对象），而是指向当前执行上下文的顶层对象（在浏览器中运行的话，就是Window对象）。

在ES6之前，我们怎么来解决这个问题呢？我们可以像如下代码一样，在成员函数中定义一个变量，把成员函数的this缓存下来，然后在内嵌函数中使用成员函数中的这个变量，这样就达到成员函数和内嵌函数中拿到的数据都是一样的：

var person = {

    _name: "Kevin",

    intro: function () {
        var that = this;  //缓存this

        console.log(that._name);   // Kevin

        var getMyIntro = function () {
          console.log(that._name);  // Kevin

          return "My name is " + that._name;
        };

        return getMyIntro();
    }
};

person.intro(); //My name is Kevin

在ES6中，我们也可以通过箭头函数来轻松解决这个问题：

var person = {

    _name: "Kevin",

    intro: function () {
        console.log(this._name);   // Kevin

        var getMyIntro = () => {
          console.log(this._name);  // Kevin

          return "My name is " + this._name;
        };

        return getMyIntro();
    }
};

person.intro(); //My name is Kevin

可以看到，我们将内嵌函数getMyIntro定义成了一个箭头函数，这样的话，箭头函数中的this是和当前上下文中的this是一致的了。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2017.01.15 ，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度