首页 > 代码库 > 浅谈this指向问题

浅谈this指向问题

2024-10-09 03:47:38   212人阅读

刚开始学习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="http://www.mamicode.com/按扭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="http://www.mamicode.com/按扭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="http://www.mamicode.com/按扭1">
<input type="button" value="http://www.mamicode.com/按扭2">
<input type="button" value="http://www.mamicode.com/按扭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="http://www.mamicode.com/按扭1">
<input type="button" value="http://www.mamicode.com/按扭2">
<input type="button" value="http://www.mamicode.com/按扭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="http://www.mamicode.com/按扭1">
<input type="button" value="http://www.mamicode.com/按扭2">
<input type="button" value="http://www.mamicode.com/按扭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指向问题


联系
我们