目录
一、BOM概述
浏览器对象模型（Browser Object Model）：它提供了独立于内容而与浏览器窗口进行交互的对象，其核心为window
BOM是由一系列相关对象构成，每个对象提供了很多属性和方法
BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分。
1、DOM和BOM区别
| DOM | BOM |
|---|---|
| 文档对象模型 | 浏览器对象模型 |
把文档当做一个对象来看待 |
把浏览器当做一个对象来看待 |
顶级对象为document |
顶级对象为window |
主要学习操作元素 |
主要浏览器窗口交互的一些对象 |
| W3C标准规范 | 浏览器厂商在各自浏览器上定义，兼容性较差 |
2、BOM构成
BOM比DOM更大，它包含DOM
window 对象是浏览器的顶级对象，它具有双重角色。
① 它是JS访问浏览器窗口的一个接口
② 它是一个全局对象，定义在全局作用于中的变量、函数都会变成window对象的 属性和方法
③ 在调用的时候可以省略window，alert()、prompt()等都属于window对象方法
注意：window下的一个特殊属性 window.name
二、window 对象的常见事件
1、窗口加载事件
《1》window.onload()方法
window.onload()是窗口（页面）加载事件，当文档内容完全加载完毕会触发调用该处理函数
window.onload = function() {
};
// 或者
window.addEventListener("load",function(){
});
① 有了window.onload就可以把JS代码写在页面元素的上方，因为 onload 是等页面内容全部加载完毕（包括图像、css、脚本文件等），再去执行处理函数
② window.onload传统注册方法只能写一次，多写以最后一个为准，用addEventListener无限制
《2》DOMContentLoaded事件
DOMCotentLoaded事件触发时，仅当DOM加载完毕，不包括样式表、图片、flash等
// Ie9以上才支持
document.addEventListener('DOMContentLoaded',function(){
})
当页面图片比较多，从用户访问到onload触发需要等待较长事件，交互效果就不能实现，必然影响用户的体验，此时用 DOMContentLoaded 事件比较合适
2、调整窗口大小事件（window.onresize()）
window.onresize() 是调整窗口大小加载事件, 当触发时就调用的处理函数。
window.onresize = function() {
};
// 或者
window.addEventListener("resize",function(){
})
① 只要窗口大小发生像素变化，就会触发onresize事件
② 通常用这个方法实现响应式布局，window.innerWidth当前屏幕的宽度
三、定时器
window对象提供了两种定时器方法：① setTimeout() ② setInterval()
1、setTimeout() 定时器到期后执行
window.setTimeout(调用函数,[延迟毫秒数]);
注意：
① window可以省略
② 延迟的毫秒数，默认为0，必须写成毫秒
③ 因为定时器可以有很多，因此可以给定时器赋值一个标识符
《1》停止定时器
window.clearTimeout(定时器ID)
2、setInterval() 每隔一段时间执行
window.setInterval(回调函数,[间隔的毫秒数])
第一次执行也是间隔毫秒数，因此刷新页面会有空白
《1》停止定时器
window.clearInterval(定时器ID)
3、回调函数
定时器中的函数被称为回调函数callback
回调函数原理：函数作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完毕之后，再执行传进去的这个函数，这个过程叫做回调
回调函数写的位置：定时器结束的位置。
4、this指向
this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this的指向，一般情况下this的最终指向都是那个调用它的对象
this的指向
① 全局作用域和普通函数中this指向全局对象window（定时器里的this也是指向window）
② 方法调用中谁调用this指向谁
③ 构造函数中this指向构造函数的实例
四、 JS执行机制
JS语言的一大特点就是单线程，也就是说同一个时间只能做一件事。
单线程意味着，所有任务需要排队，前一个任务结束之后，才会执行后一个任务。这样的结果：如果JS执行的时间过长，这样会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉
1、同步和异步
为了解决渲染阻塞的问题，利用多核CPU的计算能力，HTML5提出Web Worder标准，允许JS脚本创建多线程，于是JS出现了同步和异步
《1》同步任务
前一个任务执行完再执行后一个任务，程序的执行顺序与任务的排列迅速是一致的、同步的。
《2》异步任务
在做这个任务的同时，还可以去做其他任务。
JS中异步任务是通过回调函数实现的，一般来说，异步任务有以下三种类型：① 普通事件：click、resize等 ② 资源加载：load、error等 ③ 定时器：setTimeout、setInterval等
《3》区别
本质区别：这条流水线上各个流程的执行顺序不同
同步任务都在主线程上执行，形成一个执行栈；异步任务相关回调函数添加到任务队列中（也叫消息队列）
2、执行机制
① 先执行栈中的同步任务
② 异步任务放到任务队列中
③ 一旦执行栈中的所有同步任务执行完毕，系统会按次序读取任务队列中的异步任务，被读取到的异步任务结束等到状态，进入执行栈开始执行
由于主线程上不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（event lop）
五、location对象
Window对象提供了一个location属性，用于获取或设置窗体URL，并且用于解析URL，该属性返回值是一个对象。
1、location对象的属性
| location对象的属性 | 返回值 |
|---|---|
location.href |
获取或设置 整个URL |
| location.host | 返回主机（域名） |
| location.hash | 返回片段（#后面的内容）常见于链接、锚点 |
| location.port | 返回端口号 如果未写，返回空字符串 |
| location.pathname | 返回路径 |
location.search |
返回参数 |
2、location对象的方法
| location对象的方法 | 返回值 |
|---|---|
| location.assign() | 跟href一样，可以跳转页面（也可以重定向页面） |
| location.replace() | 替换当前的页面，因为不记录历史，所以不能后退页面 |
| location.reload | 重新加载页面，相当于刷新按钮，如果参数为true，强制刷新 |
3、URL
统一资源定位符（Uniform Resource Locator）是互联网标准资源的地址
URL的语法格式：
protocol://host[:port]/path/[?query]#fragment
http://www.baidu.com/index.html?name=zs&age=18
| 组成 | 说明 |
|---|---|
| protocol | 通信协议，常用的http、https、maito等 |
| host | 主机（域名） www.baidu.com |
| port | 端口号，http默认的为80 |
| path | 路径：由零或多个’/'符号隔开的字符串 |
| query | 参数：以键值对的形式，通过&符分割 |
| fragment | 片段：#后面内容 常见于链接，锚点 |
六、navigator对象
navigator对象包含有关浏览器的信息，有很多属性，常用的是userAgent，该属性用于返回由客户机发送服务器的 user-agent 头部的值
判断用户哪个终端打开页面，实现跳转
if(navigator.userAgent.match(/phone|pad|pod|iPhone|iPod|ios|iPad|Anroid|Mobile|BlachBerry|IEMobile|MQQBrower|JUC|Fennec|WOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i){
window.location.href=""; // 手机
}else {
window.location.href="" // 电脑
}
七、history对象
window提供的history对象，可以与浏览器历史记录进行交互。该对象包含用户在浏览器窗口中访问过的URL
| history对象方法 | 作用 |
|---|---|
| history.back() | 可以后退功能 |
| history.forward() | 可以前进功能 |
| history.go(参数) | 前进或者后退功能 |