箭头函数this指向问题
前言
箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this、arguments、super、new.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
。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律