js中this的各种使用方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li>列表1</li>
			<li>列表2</li>
			<li>列表3</li>
		</ul>
	</body>
</html>
<script type="text/javascript">
	//this的第一种情况!!!!!!!!!!!!!!!
	var li = document.querySelectorAll("li");
	for(var i = 0; i < li.length; i++){
		li[i].onmouseenter = function(){
			console.log(this);
			//在事件中!包括点击事件,鼠标事件等!!
			//this指代被点击的标签对象!
		}
	}
	
	//this的第二种情况
	var stu = {
		name:"王二狗子",
		sex:"男",
		age:18,
		hobby:["", "", ""],
		run:function(){
			console.log(this); //在对象   this就指代当前对象!!
//			console.log("狗子在奔跑!!!");
		}
	};
	//此时  this指代当前函数所属对象!!
	stu.run();
	console.log(stu);
	
	//this的第三种情况
	console.log(this);//指代window 因为全局变量/函数等都属于window
	function aaa(){
		console.log(this);//指代window
	}
    aaa();
	
</script>

测试:

前端三剑客
#JS
js中this的各种使用方法
http://ultracode.cn/2020/11/25/JS/js中this的各种使用方法/
作者
Win
发布于
2020年11月25日
许可协议