> echo "Welcome to My Tech Zone"

$ whoami

> Tech Explorer & Code Artist

$ ls social

> GitHub

> larryxue.dev

箭头函数this指向问题

前言

箭头函数表达式的语法比函数表达式更简洁,并且没有自己的thisargumentssupernew.target。箭头函数表达式更适用于那些本来需要匿名函数的地方,并且它不能用作构造函数。

箭头函数的this指向的是箭头函数所在作用域的this指向

箭头函数this指向

向来看一下这个对象,我在外部定义了一个全局变量identity,并且在内部myObject也定义了一个identity。
然后分别是四个获取identity的函数

/**
***********************************
*/
identity = 'the window';
let myObject = {
identity: 'my object',
getId1: () => console.log(this.identity),
getId2: function () {
console.log(this.identity);
},
getId3() {
return function () {
console.log(this.identity);
}
},
getId4() {
return () => console.log(this.identity);
}
}
myObject.getId(); // the window
myObject.getId2(); // my object
myObject.getId3()(); // the window
myObject.getId4()(); // my object
(myObject.getId2 = myObject.getId2)(); // the window

当时我对于myObject.getId();的结果非常意外,因为我一开始对箭头函数this指向的理解是:箭头函数的this在定义的时候绑定。所以我理所当然的认为此时应该打印my object,然而并没有。。。

然后我再去找博客学习的时候,看到了这一篇:ES6箭头函数的this指向详解 - 知乎 (zhihu.com)

原来箭头函数的this指向是定义它时所在的作用域的this指向,这时我们看myObject.getId(),定义getId()时的作用域其实就是全局作用域。所以this指向应当是window

明白了这一点以后我又写了一个myObject.getId4()函数。注意看这个函数的定义,调用它会返回一个箭头函数,再调用那个箭头函数就会打印my object
因为当我们调用myObject.getId4()时,getId4()内部的this指向是指向myObject的,因此当它返回在其内部定义的箭头函数时,箭头函数定义时的作用域是getId4()的作用域,所以其this指向就是myObject

当我们理解了这一点之后,可以再看一下myObject.getId3()这个函数,调用它同样也会返回一个打印identity的函数,当时返回的这个函数是匿名函数,匿名函数与普通函数相同,this指向是把函数当成方法调用的上下文对象,所以打印的内容其实就是window.identity

posted @   azoux  阅读(60)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律
点击右上角即可分享
微信分享提示