javascript-this指向问题和JS执行机制

prtyaa 2023-12-26 18:04:22  49561

分类专栏：资讯

1. 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>Document</title>
    <style>

    </style>
</head>

<body>
    <button>点击</button>
    <script>
        // this 指向问题： 一般情况下this的最终指向的是那个调用它的对象

        //1. 全局作用域或者普通函数中this指向全局对象windown（注意定时器里面的this指向windown)
        console.log(this);

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

        window.setTimeout(function(){
            console.log(this);
        },1000)
        // 2. 方法调用中谁调用this指向谁
        var o = {
            sayHi: function(){
                console.log(this);
            }
        }
        o.sayHi();

        var btn = document.querySelector('button');
        btn.onclick = function(){
            console.log(this);
        }

        btn.addEventListener('click',function(){
            console.log(this);
        })
        // 3. 构造函数中this指向构造函数的实例
        function Fun(){
            console.log(this);
        }

        var fun = new Fun();

    </script>
</body>

</html>

2. js同步和异步

JS早先是单线程，造成了一些堵塞效果；HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程。于是，JS中出现了同步和异步

2.1 同步任务和异步任务的执行过程

同步任务：同步任务都在主线程上执行，形成一个执行栈。
异步任务：JS的异步是通过回调函数实现的。异步任务相关的回调函数添加到异步队列中（异步队列也称消息队列）。

一般而言，异步任务有以下三种类型：

1. 普通事件，如click、resize等

2. 资源加载，如load，error等

3. 定时器，包括setInterval、setTimeout等

2.2 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>Document</title>
    <style>

    </style>
</head>

<body>
    <script>
        console.log(1);
    document.onclick = function(){//只有触发了监听事件，回调函数才会进入任务队列
        console.log(1)
    }
    console.log(2);
        setTimeout(function(){//只有触发了定时器的3秒钟，回调函数才会进入任务队列
            console.log(3);
        },3000);
        console.log(4);
    </script>
</body>

</html>

网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。

本文链接：https://www.xckfsq.com/news/show.html?id=30969

赞同 0

评论 0 条

javascript-this指向问题和JS执行机制

1. this指向问题

2. js同步和异步

2.1 同步任务和异步任务的执行过程

2.2 JS执行机制

相关文章

关注我们