ts对象中的箭头函数this指向哪里？

bigonion

本帖最后由 bigonion 于 2023-2-3 15:15 编辑

本帖最后由 bigonion 于 2023-2-2 17:52 编辑

ts对象中的箭头函数this指向哪里？

我们先来一个对象

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改成箭头函数，居然不行，像这样

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()

是会报错的

这是什么情况，箭头函数中的this到底指向哪里？

解决篇

感谢：CrazyTaylor，道哥，一之哥哥，wwwwwllllk的帮助

this在箭头函数里就和最外层的this没啥两样的，即浏览器里指的就是window

function里面的this指向调用方法的对象

李恒道

因为箭头函数取的是当前的函数作用域，对象类型不具备函数作用域
具体例子可以看
https://bbs.tampermonkey.net.cn/ ... wthread&tid=720
那我们为什么不直接写成
var cat={
  name:'哆来A梦',
  eat:()=>{
  console.log(this.name+'正在吃东西')
}
}
setInterval(cat.eat,3000)

反而要在多一层function呢？

因为箭头函数会获取到所处对象的所在的作用域，也就是windows，那this.name就变成了获取window下的name变量内容了，所以我们才需要使用一层function来保留住箭头函数所处的作用域，这点大家刚开始接触可能难以适应，不如我们简化一下:箭头函数会继承function的this作用域，大部分的时候理解都不会出现太大的问题，如果出现超出你意外的情况就请查阅资料啦！

bigonion

李恒道 发表于 2023-2-2 18:06
因为箭头函数取的是当前的函数作用域，对象类型不具备函数作用域
具体例子可以看
https://bbs.tampermonkey ...

真的好混乱

wwwwwllllk

打印一下this,打印出来指向哪里就是哪里。然后就不用纠结了，解决了问题就行了

李恒道

bigonion 发表于 2023-2-2 18:17
真的好混乱

开心点吧
目前问的都是可以在mdn和语法手册上翻到相关特性
学到中期啥资料都没有了
全靠硬读源码和相关实现

bigonion

李恒道 发表于 2023-2-2 18:45
开心点吧
目前问的都是可以在mdn和语法手册上翻到相关特性
学到中期啥资料都没有了

确实

CrazyTaylor

普通函数this指向当前对象，箭头函数指向window

王一之

wwwwwllllk 发表于 2023-2-2 18:19
打印一下this,打印出来指向哪里就是哪里。然后就不用纠结了，解决了问题就行了 ...

也是一个办法，但是有时候遇到了，还是得知道为什么，不然迷茫好久

王一之

我平常的理解是箭头函数的this就往上推一层，例如下面这样

// ==UserScript==
// @name         New Userscript
// @namespace    https://bbs.tampermonkey.net.cn/
// @version      0.1.0
// @description  try 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()

如果有多个箭头函数，就推到最顶层

// ==UserScript==
// @name         New Userscript
// @namespace    https://bbs.tampermonkey.net.cn/
// @version      0.1.0
// @description  try 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();

这么去理解可能有点暴力，但我觉得也不用太过于纠结，设计如此，就像世界的物理法则一样

bigonion

王一之 发表于 2023-2-3 09:52
[md]我平常的理解是箭头函数的this就往上推一层，例如下面这样

```js

好像箭头的this就是最外层的this