专栏首页大前端开发ES6特性之:箭头函数

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 条评论
登录 后参与评论

相关文章

  • 微信小程序视图层处理增强之WXS

    随着微信开发者工具v1.0.0的释出,beta已久的微信小程序视图层的新功能特性WXS(WeiXin Script),也正式到来了。

    一斤代码
  • ES6特性之:模板字符串

    可以再怎么写,总是觉得不是很优雅美观,尤其是文本内容比较多的时候。模板字符串的出现,极大的改善了这一痛点:

    一斤代码
  • 开源翻译中文版《深度学习(Deep Learning)》

    深度学习是机器学习研究中的一个新的领域,其动机在于建立、模拟人脑进行分析学习的神经网络,它模仿人脑的机制来解释数据,例如图像,声音和文本。

    一斤代码
  • Python操作Redis的最佳实践

    致码DevOps
  • Echart在Openlayers的应用-航班的炫光特效

    在前两篇文章中讲到了echart在openlayers2中的应用,地图统计图与热力图的实现,在本文中介绍openlayers中结合echart实现航班的炫光特效...

    lzugis
  • Crowd 批量添加用户(Postman 数据驱动)

    最近公司大量新员工入职,需要批量创建 Crowd 用户、设置密码、分配应用组等机械性重复工作(主要还是懒~),故把这个加餐任务分配给刚来的测试同学去研究。

    叨叨软件测试
  • 100 Days of SwiftUI —— Day 10:类

    最初,类看起来与结构体非常相似,因为我们使用它们来创建具有属性和方法的新数据类型。但是,它们引入了一个新的,重要的且复杂的功能,即继承——使一个类在另一个类的基...

    韦弦zhy
  • redis缓存数据库

    NoSQL(NoSQL = Not Only SQL ),意即“不仅仅是SQL”,泛指非关系型的数据库,随着互联网web2.0网站的兴起,传统的关系数据库在应...

    菲宇
  • Oracle通过substr,instr,translate函数的组合获取日期分割表

    写这一篇文章也是因为项目从SQL数据库导入Oracle数据库中遇到的问题,主要是我们要导入的数据有年月的分割表的查询。

    Vaccae
  • python通过配置文件共享全局变量

    在使用Python编写的应用的过程中,有时会遇到多个文件之间传递同一个全局变量的情况,此时通过配置文件定义全局变量是一个比较好的选择。

    十四君

扫码关注云+社区

领取腾讯云代金券