js中的this关键字

最新推荐文章于 2024-06-26 21:46:39 发布

happy sun

最新推荐文章于 2024-06-26 21:46:39 发布

阅读量97

点赞数

分类专栏： js知识点文章标签： js相关

本文链接：https://blog.csdn.net/qq_44309406/article/details/100747703

版权

js知识点专栏收录该内容

17 篇文章 0 订阅

订阅专栏

this 关键字主要用于函数中不同的场景下指向不同

//普通函数  window
	
	function fn(){
		console.log(this);
	}
	fn(); //window

	//事件函数  指向事件源
	var btn = document.querySelector('button');
	btn.onclick = function(){
		console.log(this);//button  事件源
	}
	//定时器 中也是window
	setInterval(function(){
		console.log(this); //window
	},1000);
	
	//预保留this
	//事件函数中嵌套了内层函数，需要在内层函数中使用this得到事件源(this指向window)
	var btn = document.querySelector('button');
	btn.onclick = function(){
		var _this = this;
		setInterval(function(){
			console.log(_this);
		},1000);
	}
	//this在对象的方法中，指向 调用这个方法的对象
	var  obj ={
		name:"小明",
		act:function(){
			console.log(this.name);
		},
		c:{
			name:"小红",
			b:function(){
				console.log(this.name);
			}
		}
	}
	obj.act();
	obj.c.b();

call() apply() bind() 可以改变this在函数中的指向

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<script>
			
			function fn(){
				console.log(this);
				console.log( arguments );
			}
//			fn.call();
//			fn.call(2);
			fn.call(2,3,4,5,6);
			
			/*
			 call
			 1,没有参数fn.call()  就相当于函数调用
			 2,有参数
			 	第一个参数，就是这个函数调用时的this指向，从第二个参数开始，会当做实参传入
			 * */
			function fn(){
				console.log(this);
				console.log( arguments );
			}
//			fn.apply();
//			fn.apply(2);
			fn.apply(2,[3,4,5,6]);
			/*
			 apply
			 没有参数：fn.apply() 相当于函数调用
			 有参数
			 	第一个参数是函数调用时的this指向，只有两个参数，第二个参数，必须是数组，会将数组解析出来，数组的每个元素都会当成一个实参传入
			 * */
		</script>
		
	</body>
</html>

bind方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			function fn(){
				console.log(this);
			}
			var fn2 = fn.bind(2);
			fn2();
			/*
			 bind调用，返回一个函数副本，这个函数副本中的this指向，指向了bind调用时穿的参数
			 * */
		</script>
	</body>
</html>