JS执行机制、(location,navigator，histiory)对象_综合

2020年10月10日真是痛苦的一天

JS执行机制

JS是单线程
在这里插入图片描述
同步和异步
同步

异步

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

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

普通事件，如click、resize等
资源加载，如load、error等
定时器，包括setTimeout、senInterval等

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

JS执行机制

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

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

BOM对象

URL
在这里插入图片描述

location对象
用于获取或设置窗体的URL，并且可以用于解析URL，因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象
location对象的属性
在这里插入图片描述

案例：倒计时五秒跳转页面

<body><button>点击</button><div></div>
<script>var btn = document.querySelector('button');var div = document.querySelector('div');btn.addEventListener('click', function() {
    // console.log(location.href);location.href = 'http://www.itcast.cn';})var timer = 5;setInterval(function() {
    if (timer == 0) {
    location.href = 'http://www.itcast.cn';} else {
    div.innerHTML = '您将在' + timer + '秒钟之后跳转到首页';timer--;}}, 1000);</script></body>

案例:获取URL参数传递

案例分析
在这里插入图片描述

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

<body><div></div><script>console.log(location.search); // ?uname=andy// 1.先去掉？ substr('起始的位置'，截取几个字符);var params = location.search.substr(1); // uname=andyconsole.log(params);// 2. 利用=把字符串分割为数组 split('=');var arr = params.split('=');console.log(arr); // ["uname", "ANDY"]var div = document.querySelector('div');// 3.把数据写入div中div.innerHTML = arr[1] + '欢迎您';</script>
</body>

location对象的方法
在这里插入图片描述

location.assign('http://www.itcast.cn');
//记录浏览历史可实现后退功能location.replace('http://www.itcast.cn');//记录浏览历史不可实现后退功能location.reload(true);

navigator对象

概念
在这里插入图片描述
判断用户使用何种终端打开页面

history对象

作用
在这里插入图片描述
history对象方法