前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >箭头函数中的'this'值

箭头函数中的'this'值

作者头像
学前端
发布于 2020-04-07 07:25:19
发布于 2020-04-07 07:25:19
2.2K00
代码可运行
举报
文章被收录于专栏:前端之巅前端之巅
运行总次数:0
代码可运行

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const Lucifer = {
            name: 'lucifer',
            hobbies: ['Eating', 'Sleeping', 'Repeat'],
            ZnHobbies: function () {
                this.hobbies.map(function (hobby) {
                    console.log(`${this.name} loves ${hobby}`);
                })
            }
        }
Lucifer.ZnHobbies();
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//以下是输出结果
 loves Eating
 loves Sleeping
 loves Repeat

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var that = this;

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
ZnHobbies: function () {
                this.hobbies.map((hobby)=> {
                    console.log(`${this.name} loves ${hobby}`);
                })
            }

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

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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-10-31,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 一起学前端 微信公众号,前往查看

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

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
JS箭头函数之:为何用?怎么用?何时用?
在现代JS中最让人期待的特性就是关于箭头函数,用=>来标识。箭头函数有两个主要的优点:
Clearlove
2019/08/29
4K0
ES6中的箭头函数
如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。
默默的成长
2022/12/05
6080
ES6箭头函数总结
箭头函数的this永远指向其父作用域,任何方法都改变不了,包括call,apply,bind。
用户8921923
2022/10/24
3720
ES6箭头函数总结
JS箭头函数三连问:为何用、怎么用、何时用
在现代JS中最让人期待的特性就是关于箭头函数,用=>来标识。箭头函数有两个主要的优点:其一是非常简明的语法,另外就是直观的作用域和this的绑定。
苏南
2020/12/16
2.6K0
JS箭头函数三连问:为何用、怎么用、何时用
ES6箭头函数
ES6(ECMAScript 2015)引入了箭头函数(Arrow Functions),它是一种更简洁和更具表达力的函数定义方式。箭头函数具有更短的语法形式,隐式绑定了this,并且没有自己的this、arguments、super 或 new.target。
堕落飞鸟
2023/05/22
2180
JavaScript中的箭头函数
本文可以让你了解所有有关JavaScript箭头函数的信息。我们将告诉你如何使用ES6的箭头语法,以及在代码中使用箭头函数时需要注意的一些常见错误。你会看到很多例子来说明它们是如何工作的。
chuckQu
2022/11/28
2.1K0
JavaScript中的箭头函数
JS 语法糖 1 —— 箭头函数
从 ECMAScript 6 开始,JS 新增了一种新的函数:箭头函数(Arrow Function)。
恋喵大鲤鱼
2021/02/22
2K0
js中扩充函数作用域(改变this指向)
GetName函数是在全局环境中定义,所以直接调用函数this就指向了全局环境,所以输出Jack。
小明爱学习
2020/07/06
2.6K0
ES6的箭头函数的详细介绍
如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。
Javanx
2019/09/04
4360
ES6的箭头函数的详细介绍
JavaScript中的this指向问题
在JavaScript中,关键字 this 是一个特殊的对象,它在函数被调用时自动创建。通常用来指向当前执行的函数所属的对象。this 的值在函数的每次调用时可能会发生变化,具体取决于函数是如何被调用的。
九仞山
2023/10/14
2630
ES6基础:箭头函数
我认为是这样的~,但这只是其中的一个很小原因,先来看看它有多“高大上”,也就是常见的用法
全栈程序员站长
2022/07/02
3230
简单说 JavaScript的箭头函数
箭头函数本质还是函数,我们来看看他与JavaScript中普通函数的区别,先看看写法上的区别。
FEWY
2019/05/29
5430
简单说 JavaScript的箭头函数
分享 16 个有用的 TypeScript 和 JS 技巧
英文 | https://blog.logrocket.com/16-useful-typescript-javascript-shorthands-know/
前端达人
2022/06/09
1.1K0
浅浅的分析下es6箭头函数
箭头函数作为es6重点的语法内容之一,很多开发者对其爱不释手,当也要注意其可能存在的问题,其正确的使用场景,否则会引起不必要的bug。
RobinsonZhang
2018/08/28
3560
浅浅的分析下es6箭头函数
一篇讲透:箭头函数、普通函数有什么区别
所有函数在执行时,会创建一个函数执行上下文,普通函数的执行上下文中会有一个变量 this,而箭头函数没有。
用户9899350
2022/07/29
3770
前端开发之彻底搞懂this指向
在常见的编程语言中,几乎都有this这个关键字(Objective-C中使用的是self),但是JavaScript中的this和常见的面向对象语言中的this不太一样:
青梅煮码
2023/03/13
9260
你不知道的箭头函数
箭头函数是ES6 出现的新语法,比函数更加简洁;随着浏览器的支持或者使用 Babel 进行编译,使用的场景越来越多。我们知道箭头函数与普通函数相比,没有以下特性:
前端知知
2022/09/29
1970
箭头函数与普通函数的区别详解[通俗易懂]
二.箭头函数都是匿名函数 普通函数可以有匿名函数,也可以有具体名函数,但是箭头函数都是匿名函数。 代码实例如下:
全栈程序员站长
2022/09/14
8990
JavaScript 箭头函数不完全指北
我们可以使用 babel 转译器将 ES6 代码转译为 ES5代码, ES5代码如下
撸码那些事
2019/07/30
3190
深入理解Js中的this
JavaScript作用域为静态作用域static scope,但是在Js中的this却是一个例外,this的指向问题就类似于动态作用域,其并不关心函数和作用域是如何声明以及在何处声明的,只关心它们从何处调用,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,当然实际上this的最终指向的是那个调用它的对象。
WindRunnerMax
2021/02/25
4370
相关推荐
JS箭头函数之:为何用?怎么用?何时用?
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验