本文深入探讨JavaScript中this关键字的复杂行为，通过多个实例展示普通函数、箭头函数及闭包中this的不同表现，以及如何使用call方法改变其指向。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
</body>
</html>
<script>
var name = "window";
var p2 = { name: "p2" };
var presonal1 = {
name: "presonal1",
say: function () {
console.log(this.name);
},
};
let a = presonal1.say;
a(); // window
presonal1.say(); // presonal1
presonal1.say.call(p2); // p2 this指向有 presonal1 指向p2
a.call(p2); // p2 this指向有 window 指向p2
var presonal2 = {
name: "presonal2",
say: () => {
console.log(this.name);
},
};
presonal2.say(); // window say为箭头函数 没有 this 不能指向 presonal1
presonal2.say.call(p2); // window say为箭头函数 没有 this 不能绑定 p2
var presonal3 = {
name: "presonal3",
say: function () {
// this 指向 presonal3
return function () {
// 匿名函数指向window
console.log(this.name);
};
},
};
presonal3.say()(); // window presonal3.say() 返回一个function函数 在window执行
presonal3.say().call(p2); // p2 presonal3.say() 返回一个function函数 在window执行 通过call指向p2
var presonal4 = {
name: "presonal4",
say: () =>
function () {
console.log(this.name);
},
};
presonal4.say()(); // window presonal4.say() 返回一个function函数 指向window执行
presonal4.say().call(p2); // p2 presonal4.say() 返回一个function函数 指向window执行 通过call指向p2
var presonal5 = {
name: "presonal5",
say: function () {
return () => {
// 箭头函数自动绑定 say() 的this
console.log(this.name);
};
},
};
let a2 = presonal5.say;
a2()(); // a2指向 window
presonal5.say()(); // presonal5 返回箭头函数 绑定say() 函数的 this
presonal5.say().call(p2); // presonal5 presonal5.say()返回箭头函数不能通过call改变
</script>
扫一扫
2254
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
