• 【JavaScript】JS执行机制以及三种对象讲解

    🍈作者简介：大家好，我是亦世凡华、渴望知识储备自己的一名在校大学生

    🍇个人主页：亦世凡华、的博客

    🍓系列专栏：JavaScript专栏

    🥝推荐一款模拟面试刷题神器🔥：点击跳转进入网站 

    目录

    🏍️JS执行机制

    🍇同步和异步

    🌹同步任务和异步任务

    🛵loaction对象

    🍇案例-手动点击或自动跳转页面

    🍈案例-获取URL参数

    🍉loaction对象方法

    🛺navigator对象

    🚲history对象

    🏍️JS执行机制

    JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为JavaScript这门脚本语言诞生的使命所致——JavaScript是为处理页面中用户的交互以及操作DOM而诞生的。例如：我们对某个DOM元素进行添加和删除操作，不能同时进行。应该先进行添加，之后在删除。

    单线程就意味着所有任务都需要排队，前一个任务结束才会执行后一个任务。这样所导致的问题是：如果JS执行的时间过长，就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉发生。

    🍇同步和异步

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

    同步：

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

    异步：

    前一个任务结束要花费很长时间，在这段时间内程序也可以处理其他事件。

    本质区别：

    在流水线上的各个流程的执行顺序不同。

    🌹同步任务和异步任务

    同步任务：

    同步任务都在主线程上执行，形成一个执行栈。

    异步任务：

    JS的异步是通过回调函数实现的。一般而言，异步任务有以下三种类型：

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

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

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

    异步任务相关回调函数添加到任务队列中（任务队列也称为消息队列）

    总结：在JS中把任务分为了俩大类，同步任务放到主线程执行栈中，把所有回调函数作为异步任务放到任务队列里面

    1.先执行主程序执行栈的同步任务

    2.异步任务（回调函数）放入任务队列中

    3.一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的同步任务，于是被读取的异步任务结束等待状态，进入技术栈开始执行。

    由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为“事件循环（event loop）”

    🛵loaction对象

    window对象给我们提供了一个location属性用于获取或设置窗体的URL（统一资源占位符(Uniform Resource Locator,URL) 是互联网上标准资源的地址，互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该如何处理它），并且可以用于解析URL，因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象。

    location对象属性返回值
    location.href获取或设置 整个URL
    location.host返回主机（域名）www.baidu.com
    location.port返回端口号 如果未写返回 空字符串
    location.pathname返回路径
    location.search返回参数
    location.hash返回片段 #后面内容 常见于链接 锚点

    🍇案例-手动点击或自动跳转页面

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.     <button>按钮button>
    11.     <div>div>
    12.     <script>
    13.         var btn = document.querySelector('button');
    14.         var div = document.querySelector('div');
    15.         // 手动点击
    16.         btn.addEventListener('click',function(){
    17.             location.href = 'https://www.baidu.com'
    18.         })
    19.         // 自动跳转
    20.         var time = 5;
    21.         setInterval(function(){
    22.             if(time == 0){
    23.                 location.href = 'https://www.baidu.com'
    24.             }else{
    25.                 div.innerHTML = '页面将在'+time+'秒内跳转';
    26.                 time--;
    27.             }
    28.         },1000)
    29.     script>
    30. body>
    31. html>

    🍈案例-获取URL参数

    1. login.html
    2. <body>
    3.     <form action="./test.html">
    4.         <input type="text" name="unname">
    5.         <input type="submit" value="提交">
    6.     form>
    7. body>
    8.  
    9. index.html
    10. <body>
    11.     <div>div>
    12.     <script>
    13.         // var params = location.search.substr(8)
    14.         var params = location.search.substr(1)
    15.         var arr = params.split('=')
    16.         var div = document.querySelector('div');
    17.         // div.innerHTML = params+'欢迎光临'
    18.         div.innerHTML = arr[1]+'欢迎光临'
    19.     script>
    20. body>

    🍉loaction对象方法

    location对象方法返回值
    location.assign()和href一样，可以跳转页面（也称为重定向页面）
    location.replace()替换当前页面，因为不能记录历史，所以不能后退页面
    location.reload()重新加载页面，相对于刷新按钮或者f5 如果参数为 true 强制刷新 ctrl+f5

    🛺navigator对象

    navigator对象包含有关浏览器的信息，它有很多属性，我们常用的是useAgent，该属性可以返回由客户机发送服务器的user-agent头部的值。

    下面前端代码可以判断用户的哪个终端打开页面，实现跳转：

    🚲history对象

    window对象给我们提供了一个history对象，与浏览器历史记录进行交互，该对象包含用户（在浏览器窗口上）访问过的URL。

    history对象方法作用
    back()可以后退功能
    forward()前进功能
    go参数前进后退功能 参数如果是1前进一个页面，如果是-1后退一个页面

    🍃JavaScript的学习还是要以多练习为主，想要练习JavaScript的朋友，推荐可以去牛客网看一看，链接：牛客网 里面的IT题库内容很丰富，属于国内做的很好的了，最重要的是里面的资源是免费的，是课程+刷题+面经+求职+讨论区分享，一站式求职学习网站，感兴趣的可以去看看。

    呜呜~，原创不易。

  • 相关阅读:
    【11】基础知识：React脚手架
    青岛大学数据结构与算法——第5章
    JVM 参数
    Spring学习|使用JavaConfig实现bean配置、代理模式：静态代理模式、动态代理模式（通俗易懂）
    mysql查看表名称是否大小写敏感
    （零）如何做机器视觉项目
    【K8S】通过 CoreDNS + ETCD + ExternalDNS 打通内网环境 Ingress 的域名访问
    【Flink入门修炼】1-3 Flink WordCount 入门实现
    【C++】函数重载 ③ ( 为函数指针赋值重载函数 )
    如何使用jenkins、ant、selenium、testng搭建自动化测试框架
  • 原文地址：https://blog.csdn.net/qq_53123067/article/details/126016502