JavaScript中this到底指向谁

最新推荐文章于 2024-08-16 21:14:46 发布

零怀念

最新推荐文章于 2024-08-16 21:14:46 发布

阅读量1.1k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/linghuainian/article/details/81741769

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1. 某个元素的事件触发时，会调用事件处理函数，此时事件是被该元素调用的，this指向该元素。

2.没有任何元素调用的函数，是由window调用的，this指向window。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 300px;
            width: 300px;
            background: blue;
        }
    </style>
</head>
<body >
<div id="test" onclick="change();console.log('1:'+this)" ></div>
</body>
<script>
    function change() {
        console.log("2:"+this)
    }
    change();
    console.log("onclick():"+document.getElementById("test").onclick)
</script>

</html>

运行结果（点击方块）：

点击方块前，change()可以看成是window调用的，也就是window.change()，因为定义在全局上的函数都会绑定到window对象上，所以this指向window。由于onclick事件是在div上的，事件触发之后其实执行了divObj.onclick()，（divObj指该div对象）所以1的this指该div对象。可是为什么change()函数里的this不是div对象呢？这里首先要了解我另一篇文章中讲的调用函数时加括号与不加括号的区别，change()函数与console.log('1:'+this)是onclick()函数里的内容。只是在onclick函数里面调用了一下change()方法，和在别的地方调用change()函数一样，都可以看成是都由window调用的。

3.在js中写onclick调用的函数里面的this指向触发事件的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 300px;
            width: 300px;
            background: blue;
        }
    </style>
</head>
<body >
<div id="test" ></div>
</body>
<script>
    function change() {
        console.log("2:"+this)
    }
    var div=document.getElementById("test");
    div.onclick=change;
    console.log("onclick():"+div.onclick)

</script>

</html>

运行结果（点击方块）：

仍然要结合我另一篇文章的讲的调用函数时加括号与不加括号的区别。这里的onclick函数已经和change函数引用了同一块地址，onclick函数等同于change函数，执行onclick函数就是执行change函数里的内容，而onclick是由div调用的，所以这里的this是指div。

4.onclick等于一个匿名函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 300px;
            width: 300px;
            background: blue;
        }
    </style>
</head>
<body >
<div id="test" ></div>
</body>
<script>
    var div=document.getElementById("test");
    div.onclick=function () {
        console.log("3:"+this)
    }
    console.log("onclick()："+div.onclick)

</script>
</html>

运行结果（点击方块）：