javascript-BOM-this指向和js执行机制

wuchangjian2021-11-16 11:36:11编程学习

this 指向问题

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

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

        // 1. 全局作用域或者普通函数中this指向全局对象window( 注意定时器里面的this指向window)
        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); // this指向的是 o 这个对象

            }
        }
        o.sayHi();
        var btn = document.querySelector('button');
        // btn.onclick = function() {
        //     console.log(this); // this指向的是btn这个按钮对象

        // }
        btn.addEventListener('click', function() {
                console.log(this); // this指向的是btn这个按钮对象

            })
            // 3. 构造函数中this指向构造函数的实例
        function Fun() {
            console.log(this); // this 指向的是fun 实例对象

        }
        var fun = new Fun();
    </script>
</body>

</html>

js执行机制

 

 

 

 简单理解就是异步任务在同步任务后面,所以这段代码结果是:1 2  3

 console.log(1);

     setTimeout(function() {

           console.log(3);

      }, 1000);

 console.log(2);
  console.log(1);

         setTimeout(function() {

             console.log(3);

         }, 0);

       console.log(2);

//结果还是123

 最后说一下异步任务,在任务队列时候,同一时间执行完成的,返回执行栈的顺序是一样的,但是在任务队列,不同时间完成的,那么速度快的则优先插入到执行栈,意思就是说,在应急车道上,如果是同一时间进入主车道的,那么就按照车的分类排队,如果在应急车道上,不同时间进入主车道的,那么哪辆车快,不管这辆车是什么分类,它都优先进入主车道第一的位置。

所以下面这段代码:同步任务第一优先显示,那么在异步任务的倒计时方法和时间方法,谁的执行完速度快,则优先输出结果。

 <script>
        console.log(1);

        document.onclick = function() {
            console.log('click');
        }
        console.log(2);
        setTimeout(function() {
            console.log(3)
        }, 3000)


        //同步任务放到最前面结果是:1 2 
        //
    </script>

相关文章

程序员常用网站

myBatis官网: mybatis – MyBatis 3 | 简介...

C语言:计算n的阶乘

题目描述:给定整数n,计算n!的值并输出。 输入要求:输入...

python自动化测试学习笔记-5常用模块

python自动化测试学习笔记-5常用模块

python自动化测试学习笔记-4常用模块 常用模块 1、os  2、sys ...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。