刚开始学习js,被this弄得晕头转向,回过头来也想总结一下希望能帮助正被this‘折磨’的人
我们先来看看直接执行this的情况
alert(this);//指向的是window
函数中执行
function foo(){
alert(this);
}
foo();//window
把函数赋值给变量执行
var foo = function(){
alert(foo);
}
foo();//window
上面直接执行的例子指向的都是window为什么会这样呢？
如果看过前面的学习总结一定知道,window是全局变量的对象,其实alert就是window的属性我们可以写成这样:
window.alert(this)
函数的例子也可以写成这样
function foo(){
alert(this);
}
window.foo();//window
当你看到foo()这种‘xxx()’的调用方式,那它就是指向的window,这对你理解是有帮助的
回过头来看一下this:this指的就是调用 当前 方法（函数）的那个对象
我们再来看一个例子
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js-this指向</title>
<script>
function foo(){
alert(this);
}
</script>
</head>
<body>
<input type="button" value="按扭1" id="btn">
<script>
‘use strict‘;
var text = document.getElementById("btn");
text.onclick= foo;//text
</script>
</body>
</html>
但我们这样写的话
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js-this指向</title>
<script>
function foo(){
alert(this);
}
</script>
</head>
<body>
<input type="button" value="按扭1" id="btn">
<script>
‘use strict‘;
var text = document.getElementById("btn");
text.onclick= function(){
foo();?想想会弹出什么
}
</script>
</body>
</html>
答案是:window ==》当你看到foo()这种‘xxx()’的调用方式,那它就是指向的window,这对你理解是有帮助的
我们进入实战演练一<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jsthis指向</title>
</head>
<body>
<input type="button" value="按扭1">
<input type="button" value="按扭2">
<input type="button" value="按扭3">
<script>
window.onload=function(){
var aLi = document.getElementsByTagName("input");
for(var i = 0;i<aLi.length;i++){
aLi[i].onmouseover = foo;
}
}
function foo(){
this.style.background = "red";
}
</script>
</body>
</html>
小伙伴们我们在修改一下
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jsthis指向</title>
</head>
<body>
<input type="button" value="按扭1">
<input type="button" value="按扭2">
<input type="button" value="按扭3">
<script>
window.onload=function(){var aLi = document.getElementsByTagName("input");
for(var i = 0;i<aLi.length;i++){
aLi[i].onmouseover =function(){
foo();
};
}
}
function foo(){
this.style.background = "red";
}
</script>
</body>
</html>
这样做会报错,因为foo()函数this指向的是window而不是aLi的元素
我们通过将this赋值给一个变量就可以解决这个问题
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jsthis指向</title>
</head>
<body>
<input type="button" value="按扭1">
<input type="button" value="按扭2">
<input type="button" value="按扭3">
<script>
window.onload=function(){
var aLi = document.getElementsByTagName("input");
for(var i = 0;i<aLi.length;i++){
aLi[i].onmouseover =function(){
that = this;
foo();
};
}
}
function foo(){
that.style.background = "red";
}
</script>
</body>
</html>
这样我们就解决了关于this指向的问题。
希望对你理解this的指向有个重新的认识
谢谢阅读
（完