彻底理解js中this的指向，不必硬背

prtyaa 2023-12-25 16:23:25  50922

分类专栏：资讯

首先必须要说的是，this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象（这句话有些问题），那么接下来我会深入的探讨这个问题。

为什么要学习this？如果你学过面向对象编程，那你肯定知道干什么用的，如果你没有学过，那么暂时可以不用看这篇文章，当然如果你有兴趣也可以看看，毕竟这是js中必须要掌握的东西。

例一：

var a = 10;
console.log(window.a)
console.log(this) // window

这个是一个最简单的一个例子，因为这里是全局声明的变量，所以是在 window 底下的。

例二：

function a(){
    var user = "最帅笔者";
    console.log(this.user); //undefined
    console.log(this); //Window
}
a();

按照我们上面说的this最终指向的是调用它的对象，这里的函数a实际是被Window对象所点出来的，下面的代码就可以证明。

function a(){
    var user = "最帅笔者";
    console.log(this.user); //undefined
    console.log(this);　　//Window
}
window.a();

和上面代码一样吧，其实alert也是window的一个属性，也是window点出来的

例三：

document.onclick = function(){
	console.log(this) // document
}

这个例子就不需要多说什么了，指向他的调用者。在事件中一般情况下 this 的指向都指向当前对象，也就是谁调用它指向谁

例四：

function fn(){
	console.log(this) //window
}
document.onclick = function(){
	fn()
}

这里有的人就会说了这不是谁调用它就指向谁吗，为什么指向 window 呢，这里就看下面代码

function fn(){
	console.log(this) //window
}
document.onclick = function(){
	window.fn()
}

这么一看是不是就很清晰了，这里 fn 函数的调用执行是在 window 上执行的，跟这个点击事件一点关系都没有，点击事件只是可以让这个函数开始执行了而已

例五：

var obj = {
	name:"张三",
	show:function(){
		console.log(this) //obj
	}
}
obj.show()

这里就是谁调用它就指向谁，在对象的函数中一般情况 this 的指向都指向当前对象

例六：

var obj = {
	name:"张三",
	show:function(){
		function fn(){
			console.log(this) // window
		}
		fn()
                这可以写为 window.fn()  谁调用他指向谁
	}
}
obj.show()

这里跟例四是一个道理，这里要看函数是在哪里调用的，谁调用他指向谁

例七：

setInterval(function(){
	console.log(this) //window
},0)

有的人对计时器的 this 指向不是很明白，不知道它指向谁，这里看下面代码一眼就明悟了。

function setInterval(callback){
	callback()
}

计时器也是一个函数，计时器 this 的指向都指向 window。

这里笔者再给大家总结一下

总结

1、凡是在函数内部调用的函数 this 都指向window
2、在事件中一般情况下 this 的指向都指向当前对象
3、在对象的函数中一般情况 this 的指向都指向当前对象
4、计时器 this 的指向都指向window

网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。

本文链接：https://www.xckfsq.com/news/show.html?id=30616

赞同 0

评论 0 条

彻底理解js中this的指向，不必硬背

例一：

例二：

例三：

例四：

例五：

例六：

例七：

总结

相关文章

关注我们