<!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>
