关于this的指向问题_点击事件里面的this-优快云博客

本文链接：https://blog.youkuaiyun.com/liujiebahuang/article/details/92627123

总结

window调用指向window

function fn(){
	alert(this);
}
btn.onclick = function(){
	fn();
}

点击事件中,指向当前被点击对象

btn.onclick = function(){
	alert(this);
}

btn.onclick = fn;
function fn(){
	alert(this);
}

3.点击事件中，间接this，谁调用指向谁

function fn(){
	alert(this);
}
btn.onclick = function(){
	fn();
}

4.obj 对象中的直接this指向当前对象

var obj = {
	name:"";
	show:function(){
		alert(this);
	}
}

5.new后面是对象的构造函数，构造函数中的this指向当前对象

具体

先观察以下几段代码。

场景一

	alert(this);
	//弹出[object window]
	//window.alert(this); 省略了window

js中规定，如果指向window，则window可省略。

场景二

<body>
<button id="btn">点击</button>
</body>
<script>
	var btn = document.getElementById("btn");
	btn.onclick = function(){
		alert(this);
	}
</script>
//点击后弹出[object HTMLButtonElement]

场景三

<body>
<button id="btn">点击</button>
</body>
<script>
	function fn(){
		alert(this);
	}
	fn();
	//=>指向window
</script>

<body>
<button id="btn">点击</button>
</body>
<script>
	var btn = document.getElementById("btn");
	function fn(){
		alert(this);
	}
	btn.onclick = function(){
		fn();
	}
	//=>指向window
</script>

<body>
<button id="btn">点击</button>
</body>
<script>
	var btn = document.getElementById("btn");
	function fn(obj){
		alert(obj);
	}
	btn.onclick = function(){
		fn(this);
	}
	//点击后弹出[object HTMLButtonElement]
</script>

场景四

<body>
<button id="btn">点击</button>
</body>
<script>
	var btn = document.getElementById("btn");
	btn.onclick = fn;
	function fn(){
		alert(this);
	}
	//点击后弹出[object HTMLButtonElement]
</script>

再稍作改动一下

<body>
<button id="btn">点击</button>
</body>
<script>
	var btn = document.getElementById("btn");
	btn.onclick = fn();
	function fn(){
		alert(this);
	}
	//直接弹出[object window]。直接调用，点击失效。
	
</script>

没有括号是赋值，有括号是调用。

场景五

<body>
<button id="btn">点击</button>
</body>
<script>
	var a = {
		name:"zhangsan",
		show:function(){
			alert(this.name);//this指向a
		},
	}
	a.show();
	//弹出“zhangsan”
</script>

以下是一段问题代码

<body>
<button id="btn">点击</button>
</body>
<script>
	var obj = {
		student:["张三","李四","王五","赵六"],
		showStudent:function(){
			//this放在这里就指向obj
			return function(){
				var num = parseInt(Math.random()*4);
				console.log(this.students[num]);//this指向window，无法指向obj
			}
		}
	}
	obj.showStudent();
</script>

修改一下

<body>
<button id="btn">点击</button>
</body>
<script>
	var obj = {
		student:["张三","李四","王五","赵六"],
		showStudent:function(){
			//this=》obj
			var This = this;
			return function(){
				var num = parseInt(Math.random()*4);
				console.log(This.students[num]);
			}
		}
	}
	var f = obj.showStudent();
	f();
</script>

矫正this指向
1.传参 2.变量存储

this.num=10;
This = this;
axios.get(function(){
	This .num
})

function fn(){
	var a = 10;
	return a;
}
var b = fn();

return出去的必须要有东西接，不然会造成内存泄漏。

//错误案例
if(1==1){
	return;//终止程序运行
}else{

}

function fn(){
	var a = 10;
	return a;
}
var b = fn();

break中止for循环，循环外代码继续执行。

function fn(){
	return false;//阻止默认事件，比如表单默认提交，鼠标右键事件
}

关于this的指向问题

目录

总结

具体