首先我们来看一下,通过以下场景,能够输出什么内容。
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值啦。
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有