浅谈this指向问题
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了浅谈this指向问题相关的知识,希望对你有一定的参考价值。
刚开始学习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的指向有个重新的认识
谢谢阅读
(完
以上是关于浅谈this指向问题的主要内容,如果未能解决你的问题,请参考以下文章