Javascript之setTimeout的作用域以及this的指向问题

setTimeout与this指向

最新推荐文章于 2024-07-17 15:02:16 发布

原创最新推荐文章于 2024-07-17 15:02:16 发布 · 342 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

【JS/CSS】专栏收录该内容

11 篇文章

订阅专栏

本文探讨了JavaScript中setTimeout方法的使用及其中this关键字的指向问题。通过实例代码展示了在非严格模式下，setTimeout内的函数this指向window对象，而非预期的对象实例。

setTimeout的常见用法是让某个方法延迟执行。我们知道，setTimeout方法是挂在window对象下的。《JavaScript高级程序设计》第二版中，写到：“超时调用的代码都是在全局作用域中执行的，因此函数中this的值在非严格模式下指向window对象，在严格模式下是undefined”。在这里，我们只讨论非严格模式。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>02</title>
</head>
<body>
f12, 查看控制台输出
<script>
var name = 'www.czzz2.com';
var person = {
	name : 'czz',
	getName: function() {
		setTimeout(function() {
			console.log('a=' + this.name)
		}, 0)
		return this.name
	}
}
var getName = person.getName;
console.log('b=' + person.getName());
console.log('c=' + getName());
</script>
</body>
</html>

输出结果如下：在这里插入图片描述
具体流程：

第一个输出’b=czz’, 函数内部 return this.name,this的对象是person，所以this.name为’b=czz’
第二个输出’c=www.czzz2.com’, 函数内部 return this.name,this的对象是window对象，所以this.name为’c=www.czzz2.com’
第三个和第四个输出’c=www.czzz2.com’，是因为setTimeout方法是挂在window对象下的。this指向的就是window对象。