ts对象中的箭头函数this指向哪里？
本帖最后由 bigonion 于 2023-2-3 15:15 编辑> 本帖最后由 bigonion 于 2023-2-2 17:52 编辑
## ts对象中的箭头函数this指向哪里？
我们先来一个对象
```ts
let human:{name:string,age:number,sayHi:()=>void}={
name:"superman",
age:18,
sayHi:function(){console.log(`Hi,I'm ${this.name}, I'm ${this.age} years old`);}
}
human.sayHi()
```
这样去调用human的sayHi方法自然是没问题的，这里this指向的是调用方法的对象：human
但是我发现如果把function改成箭头函数，居然不行，像这样
```ts
let human:{name:string,age:number,sayHi:()=>void}={
name:"superman",
age:18,
sayHi:()=>{console.log(`Hi,I'm ${this.name}, I'm ${this.age} years old`);}
}
human.sayHi()
```
是会报错的
!(data/attachment/forum/202302/02/175211pgfbxvgzwe7g8tbx.png)
这是什么情况，箭头函数中的this到底指向哪里？
## 解决篇
感谢：CrazyTaylor，道哥，一之哥哥，wwwwwllllk的帮助
this在箭头函数里就和最外层的this没啥两样的，即浏览器里指的就是window
function里面的this指向调用方法的对象 因为箭头函数取的是当前的函数作用域，对象类型不具备函数作用域
具体例子可以看
https://bbs.tampermonkey.net.cn/forum.php?mod=viewthread&tid=720
那我们为什么不直接写成
var cat={
name:'哆来A梦',
eat:()=>{
console.log(this.name+'正在吃东西')
}
}
setInterval(cat.eat,3000)
反而要在多一层function呢？
因为箭头函数会获取到所处对象的所在的作用域，也就是windows，那this.name就变成了获取window下的name变量内容了，所以我们才需要使用一层function来保留住箭头函数所处的作用域，这点大家刚开始接触可能难以适应，不如我们简化一下:箭头函数会继承function的this作用域，大部分的时候理解都不会出现太大的问题，如果出现超出你意外的情况就请查阅资料啦！ 李恒道 发表于 2023-2-2 18:06
因为箭头函数取的是当前的函数作用域，对象类型不具备函数作用域
具体例子可以看
https://bbs.tampermonkey ...
真的好混乱 打印一下this,打印出来指向哪里就是哪里。然后就不用纠结了，解决了问题就行了 bigonion 发表于 2023-2-2 18:17
真的好混乱
开心点吧
目前问的都是可以在mdn和语法手册上翻到相关特性
学到中期啥资料都没有了
全靠硬读源码和相关实现 李恒道 发表于 2023-2-2 18:45
开心点吧
目前问的都是可以在mdn和语法手册上翻到相关特性
学到中期啥资料都没有了
确实
普通函数this指向当前对象，箭头函数指向window wwwwwllllk 发表于 2023-2-2 18:19
打印一下this,打印出来指向哪里就是哪里。然后就不用纠结了，解决了问题就行了 ...
也是一个办法，但是有时候遇到了，还是得知道为什么，不然迷茫好久 我平常的理解是箭头函数的this就往上推一层，例如下面这样
```js
// ==UserScript==
// @name New Userscript
// @namespace https://bbs.tampermonkey.net.cn/
// @version 0.1.0
// @descriptiontry to take over the world!
// @author You
// @match https://bbs.tampermonkey.net.cn/thread-4061-1-1.html
// ==/UserScript==
this.name = "上一层˝";
this.age = 188;
let human = {
name: "superman",
age: 18,
sayHi: () => { console.log(`Hi,I'm ${this.name}, I'm ${this.age} years old`); }
}
human.sayHi()
```
如果有多个箭头函数，就推到最顶层
```js
// ==UserScript==
// @name New Userscript
// @namespace https://bbs.tampermonkey.net.cn/
// @version 0.1.0
// @descriptiontry to take over the world!
// @author You
// @match https://bbs.tampermonkey.net.cn/thread-4061-1-1.html
// ==/UserScript==
this.name = "上一层˝";
this.age = 188;
let func = () => {
let human = {
name: "superman",
age: 18,
sayHi: () => { console.log(`Hi,I'm ${this.name}, I'm ${this.age} years old`); }
}
human.sayHi()
}
func();
```
这么去理解可能有点暴力，但我觉得也不用太过于纠结，设计如此，就像世界的物理法则一样
王一之 发表于 2023-2-3 09:52
我平常的理解是箭头函数的this就往上推一层，例如下面这样
```js
好像箭头的this就是最外层的this
页:
[1]
2