JavaScript：this指向问题、同步和异步、 JS执行机制、location对象

最新推荐文章于 2022-09-20 22:26:56 发布

置顶 MDR_0820

最新推荐文章于 2022-09-20 22:26:56 发布

阅读量1k

点赞数 3

分类专栏： JavaScript 文章标签： javascript 前端 es6 面试

本文链接：https://blog.csdn.net/MDR_0820/article/details/120955909

版权

JavaScript 专栏收录该内容

49 篇文章 0 订阅

订阅专栏

this

this 的指向在函数定义的时候是确定不了的只有函数执行的时候才能确定this指向谁一般情况下 this 的最终指向的是那个调用它的对象

.全部作用域或者普通作用函数中 this指向全局对象window （定时器里面的 this指向window）
方法调用中谁调用this指向谁
构造函数this指向构造函数

<body>
    <button> 按钮</button>
    <script>
        // this 指向问题 一般情况下 this最终指向是调用它的对象
        // 1.全部作用域或者普通作用函数中 this指向全局对象window （定时器里面的 this指向window）
        console.log(this);

        function fn (){
            console.log(this);
        }
        fn()
        // 定时器   指向的也是window
        // setInterval(function(){
        //     console.log(this);
        // },1000) 

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

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

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

在这里插入图片描述

同步和异步

JS是单线程

JavaScript 语言的一大特点就是单线程也就是说同一时间只能做同一件事这是因为JavaScript这门脚本语言诞生的使命所致 --JavaScript是处理页面中用户的交互以及操作DOM而诞生的
比如：我们对某个DOM 元素进行添加和删除操作不能同时进行应该是先添加后删除
单线程就意味着所有任务需要排队前一个任务结束才会执行后一个任务这样所导致的问题是 JS 执行时间过长这样就会造成页面的渲染不连贯导致页面渲染加载阻塞的感觉

为了解决掉这个问题利用多核CPU的计算能力，HTML5 提出Web Worker 标准允许JavaScript脚本创建多个线程于是 JS 中出现了同步和异步

同步

前一个任务结束后在执行后一个任务程序的执行顺序与任务排列顺序是一致的、同步的

异步

在执行一件任务是会花费很长时间在这个时间内可以去执行其他的任务
本质区别在这个流水线上各个执行的顺序不同

<script>
        console.log(1);
        setInterval(function(){
            console.log(3);
        },1000);
        console.log(2);
        console.log('----------------');
    </script>

在这里插入图片描述

同步任务

都是在主线程上执行形成一个执行栈

异步任务

JS 的异步是通过回调函数实现的的
一般而言异步任务有三种类型
1 .普通事件，如click resize 等
2.资源加载，如load 、error 等
3.定时器，包括setInterval、setTimeout 等

执行顺序

1.先执行执行栈中的同步任务
2.异步任务（回调函数）放入任务队列中
3.一旦执行栈中的所有同步任务执行完毕系统就会按次序读取任务列队中的异步任务于是被读取的异步任务结束等待状态进入执行栈开始执行

在这里插入图片描述

console.log(1);
        setInterval(function(){
            console.log(3);
        },0); // 注意 定时器时间 已设置为0 但是 还是会先执行 执行栈里的
        console.log(2);
        console.log('----------------');

在这里插入图片描述

由于主线程不断地获取任务、执行任务、再获取任务、在执行所以这种机制被称为
事件循环 event loop

在这里插入图片描述

 console.log(1);

        document.onclick = function(){
            console.log('click');
        }

        console.log(2);

        setTimeout(function(){
            console.log(3);
        },2500)

在这里插入图片描述

location对象

window对象给我们提供了一个location属性用于获取或设置窗体的URL 并且可以用于解析URL 因为这个属性返回的是一个对象所以我们将这个属性也称为 location对象

URL

统一资源定位符是互联网上标准的资源地址互联网上每个文件都有一个唯一的URL 它包含的信息指出文件的位置以及浏览器应该怎么处理它
URL 一般的语法格式为
protocol：// host [:port] / path / [?qurey]#fragment
http: // www.itcast.cn/index.html?name=andy&age=18#link

location 对象的属性

在这里插入图片描述

location 对象方法

在这里插入图片描述

获取 URL 参数提交到另一页面代码练习

<body>
    <form action="index.html">
        姓名：<input type="text" name="uname" id="">
        <input type="submit" value="登录">  
    </form>         
</body>

在这里插入图片描述

index页面

<body>
    <div></div>
    <script>
        console.log(location.search);  // ?uname = andy
        // 先去掉？   substr(起始的位置，截取几个字符)
        var params = location.search.substr(1) //uname = andy
        console.log(params);
        var arr = params.split('=')
        console.log(arr);
        var div = document.querySelector('div') 
        div.innerHTML=arr[1] + '欢迎您'
    </script>

在这里插入图片描述

MDR_0820

关注

3
点赞
踩
24

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript：this指向问题、同步和异步、 JS执行机制、location对象

thisthis 的指向在函数定义的时候是确定不了的只有函数执行的时候才能确定this指向谁一般情况下 this 的最终指向的是那个调用它的对象.全部作用域或者普通作用函数中 this指向全局对象window （定时器里面的 this指向window）方法调用中谁调用this指向谁构造函数this指向构造函数<body> <button> 按钮</button> <script> // this 指向问题
复制链接

扫一扫