This详细用法

W`hite

于 2023-12-02 11:16:48 发布

阅读量1.2k

点赞数 22

文章标签： javascript 前端 this指向

本文链接：https://blog.csdn.net/AYBBZXY/article/details/134574300

版权

本文详细解释了JavaScript中this关键字在不同场景下的指向，包括普通函数、构造函数、方法、定时器、事件和箭头函数，并介绍了call(),apply(),bind()等方法用于改变this的指向。

摘要由CSDN通过智能技术生成

this的指向

this有5种指向，在普通函数中，this指向window；在构造函数中，this指向创建的对象；在方法声明中，this指向调用者；在定时器中， this指向window；在事件中，this 指向事件源。

自定义函数中的this指向的是window，事件处理程序下的this,指向绑定这个事件的事件源对象，自定义对象下的方法中的this指向调用这个方法的对象，严格模式下自定义函数的this是undefined，定时器下的this指向的是window。可以使用bind(),call(),apply()改变this的指向，箭头函数里面的this来源于声明时所在的上一级this的指向，箭头函数里面的this指向不能改变。

this是js中的一个关键字
this 谁调用我，this就指向谁（es6的箭头函数不算）

<body>
	<div id="box">click</div>
	<script>
		//this 关键字
		//this 谁调用我，this就指向谁（es6箭头函数不算）
		//在全局中验证
		//console.log(this)
		//function test(){
		//	console.log(this)
		//}
		//window.test()

		//对象中的this
		var obj = {
			name:"zxy",
			test:function(){
				console.log("11111",this.name)
			}
		}
		//console.log(obj.test)//打印的是函数，没有内容

		obj.test()//打印的是obj内容,拿到11111


		//setTimeout 延时定时器中的this
		setTimeout(function(){
			console.log(11111,this)//里面this指向的还是window窗口的
		},2000)


		//事件绑定中的this
			//dom0
		box.onclick = function(){
			console.log(this )
		}

			//dom2
		box.addEventListener("click",function(){
			console.log("11111",this)
		})
	</script>
</body>

改变this指向

<body>
<script>
	//call appply bind这三个方法可以改变指向，但是使用时有去区别

	var obj1 = {
		name:"obj1",
		getName:function(a,b,c){
			console.log("getName1,this.name")
			console.log("参数"a,b,c)
		}
	}

		var obj2 = {
		name:"obj2",
		getName:function(){
			console.log("getName2,this.name")
		}
	}
	//console.log(obj1)
	//obj1.getName()
	//obj2.getName()

	//如何把obj1中的this指向obj2
	//call  执行函数，并改变this执行为函数的第一个函数  
	//可以传n个参数
	obj1.getName.call(obj2)//调用完call，传上obj2参数

	//apply 执行函数，并改变this执行的函数为第一个参数
	//只能传两个参数，第二个参数是一个数组
	obj1.getName.apply(obj2)

	obj1.grtName.call(window)//打印结果如下图①

	//bind
	/*改变this指向为函数的第一个参数，不会自动执行函数。改完之后它给
	你返回了一个新的函数，但是新的函数的this指向已经变成了指
	向obj2了，但这个函数需要手动调用*/
	//obj1.getName.bind(obj2)//执行后根本没有结果
	var fun1 = obj1.getName.bind(obj2)
	console.log(fun1)//执行结果为下图②
	fun1()//手动执行

	btn.onclick = handler.bind(window)//只想window，不会自动执行，点的时候才会执行

	function	 handler(){
		console.log(11111,this)
	}
</script>
</body>

①apply 在这里插入图片描述
②

this指向详解🔍

W`hite

关注

22
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
This详细用法

自定义函数中的this指向的是window，事件处理程序下的this,指向绑定这个事件的事件源对象，自定义对象下的方法中的this指向调用这个方法的对象，严格模式下自定义函数的this是undefined，定时器下的this指向的是window。可以使用bind(),call(),apply()改变this的指向，箭头函数里面的this来源于声明时所在的上一级this的指向，箭头函数里面的this指向不能改变。//console.log(obj.test)//打印的是函数，没有内容。//this 关键字。
复制链接

扫一扫