专栏首页前端之巅箭头函数中的'this'值

箭头函数中的'this'值

首先我们来看一下,通过以下场景,能够输出什么内容。

const Lucifer = {
            name: 'lucifer',
            hobbies: ['Eating', 'Sleeping', 'Repeat'],
            ZnHobbies: function () {
                this.hobbies.map(function (hobby) {
                    console.log(`${this.name} loves ${hobby}`);
                })
            }
        }
Lucifer.ZnHobbies();
//以下是输出结果
 loves Eating
 loves Sleeping
 loves Repeat

那么 为什么hobby的值输出成功,而name不能够输出呢?是因为lucifer丑吗?其实那只是其中一个因素,还有一个因素就是在ZnHobbies方法中的this已经不属于上一个区块,而这里的this并没有name值。所以 解决办法的其中一个就是在ZnHobbies函数中写入

var that = this;

然后将this替换成that,所以输出的结果中,就有了lucifer的名字啦。

还有的一个办法就是将ZnHobbies函数下的map改写成箭头函数:

ZnHobbies: function () {
                this.hobbies.map((hobby)=> {
                    console.log(`${this.name} loves ${hobby}`);
                })
            }

这样改写完,Lucifer的name也可以显示出来啦!

为什么箭头函数可以达到这样的效果呢?是因为箭头函数没有它自己的'this'值。它的this值是继承于它的父作用域的。所以它不会随着调用方法的改变而改变,所以这里的this值就指向它的父级作用域,而上一个this指向的是Lucifer这个Object。所以我们就能准确得到Lucifer的name值啦。

本文分享自微信公众号 - 一起学前端(xueqianduan),作者:别加香菜

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-10-31

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 在前端中理解MVC服务之TypeScript篇

    通过开发一个网页应用来理解构建前端应用的方法,其中,使用JavaScript作为脚本语言,并转向使用JavaScript/TypeScript作为面向对象程序开...

    学前端
  • 在前端中理解MVC服务之 Angular篇(完结)

    本文是该系列中的第三篇,旨在了解 MVC 体系结构如何创建前端应用程序。目的是了解如何构建前端应用程序。这是通过从使用 JavaScript 作为脚本语言的网页...

    学前端
  • 使用Ionic React实现的无限滚动效果

    ionic start infiniteScroll tabs --type react

    学前端
  • JavaScript 风格指南 [每日前端夜话(0x1C)]

    原文链接:https://github.com/ryanmcdermott/clean-code-javascript

    疯狂的技术宅
  • 聊一聊Javasript继承

      前前后后已经快写了2年左右javaScript,刚开始只是简单用于一些表单验证和操作dom节点,并没有深入的使用,随着渐渐的深入,开始不想去写重复的代码(懒...

    牛嗷嗷
  • React思考题

    小胖
  • jQuery中this与$(this)的区别

    用户1258909
  • javascript基础修炼(3)—What's this(下)

    严格模式是ES5中添加的javascript的另一种运行模式,它可以禁止使用一些语法上不合理的部分,提高编译和运行速度,但语法要求也更为严格,使用use str...

    大史不说话
  • Oculus + Node.js + Three.js 打造VR世界

    Oculus Rift 是一款为电子游戏设计的头戴式显示器。这是一款虚拟现实设备。这款设备很可能改变未来人们游戏的方式。 周五Hackday Showcase的...

    李海彬
  • 高级Js-Tab切换组件

    星辉

扫码关注云+社区

领取腾讯云代金券