关于函数的this指向问题

var name = 'window';

    var person1 = {
      name:'person1',
      foo1:function() {
        console.log(this.name);
      },
      foo2: () => console.log(this.name),
      foo3:function() {
        return function() {
          console.log(this.name);
        }
      },
      foo4:function() {
        return () => {
          console.log(this.name);
        }
      }
    }

    var person2 = {name:'person2'};

    person1.foo1();//person1
    person1.foo1.call(person2);//person2

    person1.foo2();
    person1.foo2.call(person2);

    person1.foo3()();
    person1.foo3.call(person2)();
    person1.foo3().call(person2);

    person1.foo4()();
    person1.foo4.call(person2)();
    person1.foo4().call(person2);

只懂前两个。。箭头函数中，this不是指向定义箭头函数的上下文吗，在person1中定义，怎么指向window?还有下面的也不懂，return一个函数的this是指向哪里？


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> -->
    <title>document</title>
  </head>
  <body>
    <script type="text/javascript">
      var name = "window";

      var person1 = {
        name: "person1",
        foo1: function () {
          console.log(this.name);
        },
        foo2: () => console.log(this.name),
        foo3: function () {
          return function () {
            console.log(this.name);
          };
        },
        foo4: function () {
          return () => {
            console.log(this.name);
          };
        },
      };

      var person2 = { name: "person2" };
      // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions
      // 原因一：箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this
      // 原因二：由于 箭头函数没有自己的this指针，通过 call() 或 apply() 方法调用一个函数时，只能传递参数（不能绑定this---译者注），他们的第一个参数会被忽略。

      person1.foo1(); // person1 person1调用foo1方法 所以指向foo1
      person1.foo1.call(person2); // person2 call强制将this指向person2

      person1.foo2(); // window 原因一 person1.foo2上一层就是全局，所以指向window
      person1.foo2.call(person2); // window 原因一 person1.foo2上一层就是全局，所以指向window

      person1.foo3()(); // window 其实是(person1.foo3())() 有用到柯里化，所以指向window
      person1.foo3.call(person2)(); // window 其实是(person1.foo3.call(person2))() 有用到柯里化，所以指向window
      person1.foo3().call(person2); // person2 其实是(person1.foo3()).call(person2) call强制将this指向person2

      person1.foo4()(); // person1 原因二原因一 person1.foo4()()上一层就是person1.foo4，所以指向person1
      person1.foo4.call(person2)(); // person2 原因二原因一 person1.foo4()()上一层就是person1.foo4，然后call强制将this指向person2，所以指向window
      person1.foo4().call(person2); // person1 原因二原因一 person1.foo4()()上一层就是person1.foo4，所以指向person1
    </script>
  </body>
</html>

使用箭头函数时，内部的this指向上层作用域中的this