ES6特性之:箭头函数

在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是一致的了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏玄魂工作室

如何学python 第十二课 逻辑运算符-成员运算符

第十二课 逻辑运算符-成员运算符 上一节我们介绍了元组和字典。这节课我们讨论点别的,逻辑运算符和成员运算符(有些人也把这个翻译成身份运算符)。他们和布尔类型紧密...

34650
来自专栏C/C++基础

多字节与宽字符串的相互转换

说到多字节字符串与宽字符串,不得不说一下多字节字符与宽字符。多字节字符实际上是由多个字节来表示一个字符,在各个国家和地区采用不同的编码方案,不同编码方案字符码值...

17520
来自专栏一个小程序员的成长笔记

私有变量

11440
来自专栏王亚昌的专栏

类模板学习总结

1.类模板就是给普通的类加上一个参数,参数可以是未知数据类型标识(如int, string,char, class等),也可以是已知数据类型的值,在下面的第二个...

10720
来自专栏Albert陈凯

Scala Collections集合的几个重要概念

几个重要的概念 谓词是什么(What a predicate is) A predicate is simply a method, function, or...

24130
来自专栏性能与架构

mysql char与varchar类型的区别

image.png 基本区别 char 是固定长度的,varchar 是可变长度的 char 如果某个长度小于M,MySQL就会在它的右边用空格补足,使长度达到...

34750
来自专栏pangguoming

java正则校验,密码必须由字母和数字组成

一个匹配数字和字母密码的正则表达式 2011 年 12 月 14 日 | Filed under: 正则表达式 and tagged with: 密码 , ...

69260
来自专栏算法修养

pta 习题集 5-15 数组循环左移

本题要求实现一个对数组进行循环左移的简单函数:一个数组aa中存有nn(>0>0)个整数,在不允许使用另外数组的前提下,将每个整数循环向左移mm(≥0≥0)个位...

36360
来自专栏前端架构与工程

constructor属性解析

JavaScript中constructor属性一直不是很清楚,今日终于弄清了其中缘由,下面举例说明。 首先是一个典型的JavaScript实例声明: func...

19490
来自专栏Jack-Cui

第四天、婚礼上的谎言

       3对情侣参加婚礼,3个新郎为A、B、C,3个新娘为X、Y、Z,有人想知道究竟谁与谁结婚,于是就问新人中的三位,得到如下结果:A说他将和X结婚;X说...

25800

扫码关注云+社区

领取腾讯云代金券