JavaScript---BOM对象、JS执行机制、location对象

Window对象

目标：学习window对象的常见属性，知道各个BOM对象的功能含义

BOM

BOM（Browser Objecct Model ）是浏览器对象模型

window对象是一个全局对象，也可以说是JavaScript中的顶级对象
像document、alert（）、console.log（）这些都是window的属性，基本BOM的属性和方法都是window的
所有通过var定义在全局作用域的变量、函数都会变成window对象的属性和方法
window对象下的属性和方法调用的时候可以省略window

定时器-延时函数

JavaScript内置的一个用来让代码延迟执行的函数，叫 setTimeout

语法：

javascript 复制代码

setTimeout(回调函数，等待的毫秒数 )

setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行，平时省略window

清除延迟函数：

javascript 复制代码

let  timer  =   setTimeout(回调函数，等待的毫秒数)
clearTimeout(timer)

注意：

延时器需要等待，所以后面的代码先执行
每一次调用延时函数都会产生一个新的延时函数

两种定时器对比

延时函数：执行一次
间隔函数：每隔一段时间就执行一次，除非动手清除

JS执行机制

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

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

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

同步

前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法:我们要烧水煮饭，等水开了(10分钟之后)，再去切菜，炒菜。
异步

你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。
他们的本质区别: 这条流水线上各个流程的执行顺序不同。

整个执行过程

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

location对象

location 的数据类型对象，它拆分并保存了URL 地址的各个组成部分

常用属性和方法：
href 属性获取完整的URL 地址，对其赋值时用于地址的跳转

javascript 复制代码

console.log(location.herf)
location.herf  ='某个地址'

search属性获取地址中携带的参数，符号？后面部分

javascript 复制代码

console.log(location.search)

hash属性获取地址中的哈希值，符号 # 后面部分

javascript 复制代码

console.log(location.hash )

后期vue 路由的铺垫，经常用于不刷新页面，显示不同页面。

reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新

javascript 复制代码

function(){
   location.reload(true)
}

navigator对象

navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息

常用属性和方法

通过userAgent检测浏览器的版本及平台

history对象

1. 基础概念

定义：浏览器内置对象，用于操作当前标签页/窗口的会话历史记录。
访问方式 ：通过window.history直接访问（可省略window）。

2. 核心属性

length：返回历史记录中的URL总数（含当前页面）。

3. 常用方法（基础导航）

back()：后退到上一历史记录（等价于浏览器"后退"按钮）。
写法：
javascript 复制代码
```
function（）{
   history.back()
}
```
forward()：前进到下一历史记录（等价于浏览器"前进"按钮）。
go(n) ：跳转到相对于当前页的第n条记录（n为整数，n=0刷新页面）。

4. HTML5新增方法（状态管理，无刷新修改URL）

pushState(state, title, url)：添加新历史记录，不触发页面刷新。
replaceState(state, title, url)：替换当前历史记录，不触发页面刷新。
popstate事件 ：监听历史记录变化（如前进/后退操作），通过event.state获取状态数据。

5. 注意事项

安全性：仅能操作当前会话历史，无法访问其他标签页或隐私模式记录。
URL限制 ：pushState/replaceState的url需与当前页面同源。
兼容性：基础方法全浏览器支持，HTML5方法需IE10+。