Vue注意点——this

飞熊 • 2023年7月27日下午2:16 • 技术随笔 • 阅读 309

面向对象语言中 this 表示当前对象的一个引用。

但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

在方法中，this 表示该方法所属的对象。
如果单独使用，this 表示全局对象。
在函数中，this 表示全局对象。
在函数中，在严格模式下，this 是未定义的(undefined)。
在事件中，this 表示接收事件的元素。
类似 call() 和 apply() 方法可以将 this 引用到任何对象。

那么就大致的看看这些this在常用的几个使用环境中代码中的表现吧

在方法中，this 表示该方法所属的对象：

代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>对于this的测试</title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="app">
			<button type="button" @click="printThis">打印方法中的this</button>
		</div>
		
		<script>
			new Vue({
				el:'#app',
				methods:{
					printThis(){
						console.log(this)
					}
				}
			})
		</script>
	</body>
</html>

打印结果：

可以看到，在点击按钮打印出的this对象是Vue，也确实是方法所属的对象

如果单独使用：this 表示全局对象。

代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>对于this的测试</title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="app">
			
		</div>
		
		<script>
			var a = this
			console.log(a)
		</script>
	</body>
</html>

打印结果：

可以看到，在直接使用的时候，this指向的对象就是windows，也就是全局对象

在函数中：this 表示全局对象。

代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>对于this的测试</title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="app">
			
		</div>
		
		<script>
			document.getElementById("app").innerHTML = priontThis();
			function priontThis(){
				return this
			}
		</script>
	</body>
</html>

打印结果：

可以看到，在我们使用函数返回一个this对象的时候，将返回值打印在页面中显示的是Window，也就是全局对象

在事件中：

代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>对于this的测试</title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="app">
			<button type="button" onclick="this.style.display='none'">点我消失</button>
			<!-- <button type="button" v-on:click="this.style.display='none'">点我消失</button> -->
		</div>
		
		<script>
			new Vue({
				el:'#app',
				methods:{
					print(){
						console.log(this)
					}
				}
			})
		</script>
	</body>
</html>

打印结果：

按钮在点击之后就消失了，这是绑定了原生的js事件是oncilck，并不是Vue中的事件，如果你使用v-on:cilck的方式绑定了一个央视，会报错

当方法作为参数传递到自定义指令的时候：

代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>对于this的测试</title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p v-color>你好世界</p>
		</div>
		
		<script>
			new Vue({
				el:'#app',
				directives:{
					color:{
						bind(){
							console.log(this)
						}
					}
				}
			})
		</script>
	</body>
</html>