this指向和js执行机制_this指向和js机制课件-优快云博客

本文链接：https://blog.youkuaiyun.com/WangZhang_521/article/details/123525857

本文详细解析了JavaScript中this的关键指向规则，从全局作用域、方法调用、构造函数到定时器和事件处理，同时探讨了执行队列的工作原理。通过实例演示，揭示了JavaScript中隐式this的秘密。

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

01-this指向问题

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>this指向问题</title>
</head>

<body>
    <button>点击</button>
    <script>
        // 一般情况下，this的最终指向的是那个调用它的对象
        //1.全局作用域或者普通函数中this指向全局对象window (注意定时器里面的this指向window)
        console.log(this); //window

        function fn() {
            console.log(this); //window
        }
        window.fn();

        window.setTimeout(function() {
            console.log(this); //window
        }, 1000);

        //2.方法调用中谁调用this指向谁
        var o = {
            sayHi: function() {
                console.log(this); //this指向的是o这个对象
            }
        }
        o.sayHi();

        var btn = document.querySelector('button');
        // btn.onclick = function() {
        //     console.log(this); //this指向的是button按钮对象
        // }
        btn.addEventListener('click', function() {
            console.log(this); //this指向的是button按钮对象
        })

        //3.构造函数中this指向构造函数的实例
        function Fun() {
            console.log(this); //this指向的是fun实例对象
        }
        var fun = new Fun();
    </script>
</body>

</html>

02-js执行队列

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js执行队列</title>
</head>

<body>
    <script>
        // 1.第一个问题
        // console.log(1);

        // setTimeout(function() {
        //     console.log(3); //先打印3之后再打印2
        // }, 2000);

        // console.log(2);

        // 第二个问题

        console.log(1);

        setTimeout(function() {
            console.log(3); //先打印2再打印3
        }, 0);

        console.log(2);
    </script>
</body>

</html>