JavaScript基础——window对象、BOM对象

1、BOM（浏览器对象模型）

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

• window对象是浏览器内置的全局对象，大部分webAPIs的只是内容都是基于Window实现的
• window对象下包含了navigator 、location 、document、history、screen五个属性，即所谓的BOM
• document是实现DOM的基础，其依附于window的属性
  

BOM 主要针对浏览器窗口和子窗口（frame），不过人们通常会把任何特定于浏览器的
扩展都归在 BOM 的范畴内。比如，下面就是这样一些扩展
弹出新浏览器窗口的能力；

• 移动、缩放和关闭浏览器窗口的能力；
• navigator 对象，提供关于浏览器的详尽信息；
• location 对象，提供浏览器加载页面的详尽信息；
• screen 对象，提供关于用户屏幕分辨率的详尽信息；
• performance 对象，提供浏览器内存占用、导航行为和时间统计的详尽信息；
• 对 cookie 的支持；
• 其他自定义对象，如 XMLHttpRequest 和 IE 的 ActiveXObject。

2、定时器——延时函数

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

语法；setTimeout(回调函数，等待的毫秒数)
setTimeout 仅仅执行依次，所以可以理解为就是把一段代码延迟执行，使用时可以省略window

样例代码，创建定时器、删除定时器

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

关于延时函数与定时函数

• setInterval 的特征是重复执行，首次执行会延时
• setTimeout 的特征是延时执行，只执行一次
• setTimeout 结合递归函数，能模拟 setInterval 的重复执行特点
• clearTimeout 清除由 setTimeout 创建的定时任务

3、 JS执行机制

JS语言的一大特点是单线程，也就是说，同一个时间只能做一件事。这是因为JS这门脚本语言诞生的使命所致——JS是为处理页面中用户的交互，以及操作DOM而诞生的。

比如我们对某个DOM元素进行添加和删除操作，不能同时进行，应该先添加之后再删除

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

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

3.1 同步和异步

同步任务

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

异步任务

异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有等主线程任务执行完毕，"任务队列"开始通知主线程，请求执行任务，该任务才会进入主线程执行。

JS的异步是通过回调函数实现的，一般来说有以下几种

1. 普通事件，click、resize事件等
2. 资源加载，如load，error等
3. 定时器，setTimeout，setInterval等

执行顺序

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

4、 location对象

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

常用的属性和方法

• href 属性获取完整的URL地址，对齐赋值时用于地址的跳转
• search 属性获取地址中携带的参数， 地址中符号？后面的部分
• hash 属性获取地址中的哈希值，地址中符号 # 后面的部分
• reload方法用来刷新当前页面，传入参数true时表示强制刷新

样例代码：

 console.log(location.href)	//得到当前URL地址
 location.href = "https://www.zhihu.com/hot"	//通过JS跳转到目标地址

 location.reload(ture)	//reload方法用于刷新当前页面，传入参数ture表示强制刷新

5、navigator对象

navigator对象记录了浏览器自身的相关信息

navigator属性

navigator方法

6、history对象

history 对象提供了对浏览器的会话历史的访问(不要与 WebExtensions history搞混了)。
它暴露了很多有用的方法和属性，允许你在用户浏览历史中向前和向后跳转，同时——从HTML5开始——提供了对history栈中内容的操作。

使用 back(), forward()和 go() 方法来完成在用户历史记录中向后和向前的跳转。

在history中向后跳转，这和用户点击浏览器回退按钮的效果相同：
window.history.back();

向前跳转（如同用户点击了前进按钮）
window.history.forward();

跳转到 history 中指定的一个点
你可以用 go() 方法载入到会话历史中的某一特定页面， 通过与当前页面相对位置来标志 (当前页面的相对位置标志为0)
向后移动一个页面 (等同于调用 back()):window.history.go(-1);

向前移动一个页面, 等同于调用了 forward():window.history.go(1);