变化莫测的this指向(一)

O不是山谷

于 2020-06-17 16:17:20 发布

阅读量130

点赞数

分类专栏：前端文章标签： js html

本文链接：https://blog.youkuaiyun.com/qq_28535633/article/details/106810984

版权

前端专栏收录该内容

1 篇文章

订阅专栏

本文深入解析前端开发中this指向的问题，通过具体实例说明在不同调用环境如事件处理中的this指向变化，帮助开发者理解并正确使用this。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在前端开发的面试中，this指向问题是最常见的问题，很多新手都弄不清this指向的究竟是什么，那么下面我就详细解释一下。
透彻认识function中的this在不同调用环境中中的指向：

事件调用环境：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .lili, .box{
            width: 100px;
            height: 100px;
            background: #0A8CD2;
            left: 0;
            position: relative;
            transition: 1s;
        }
    </style>
</head>
<body>

<div class="box"></div>
<div class="lili"></div>

<script>
    let box = document.querySelector('.box');
    box.onclick = move;

    let lili = document.querySelector('.lili');
    lili.onclick = move; 

    function move() {
         //lili调用时指向lili,box调用时指向box
        if (this.style.left == '100px') {
            this.style.left = '0px';
        } else {
            this.style.left = '100px';
        }
    }
</script>
</body>
</html>

我们现在来看一下效果：点击不同的方块时会使不同的方块进行移动。