09-WebAPIs④（BOM、window对象、定时器、location对象、location对象、location对象、JS执行机制）

1. BOM

1.1 什么是BOM

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。

BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分。

1.2 BOM的构成

BOM 比 DOM 更大，它包含 DOM。

1.3 顶级对象window

• window对象是JS访问浏览器窗口的一个接口
• window对象是一个全局对象。定义在全局作用域中的变量、函数都会编程window对象的属性和方法。在调用的时候可以省略window，如alert()、prompt()等。
  -（window下有一个特殊属性window.name，所以不可以用name做标识符）

1.4 window对象的常见事件

页面（窗口）加载事件（2种）

• window.onload = function(){} 或者 window.addEventListener('load',function(){});
  window.onload 是窗口 (页面）加载事件，当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。

• docuemnt.addEventListener('DOMContentLoaded',function(){});IE9以上支持
  DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现，必然影响用户的体验，此时用 DOMContentLoaded 事件比较合适

调整窗口大小事件

window.onresize= function(){} 或者 window.addEventListener('resize',function(){});
window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。window.innerWidth 当前屏幕的宽度

1.5 定时器

setTimeout() 炸弹定时器

• 开启定时器
  window.setTimeout(回调函数,[延迟的毫秒数]);
  （window可以省略；毫秒数默认为0）

• 停止定时器
  window.clearTimeout(timeoutID); 取消先前通过调用setTimeout()方法建立的定时器
  （window可以省略；参数就是定时器的标识符）

setInterval() 闹钟定时器

• 开启定时器
  window.serInterval(回调函数,[间隔的毫秒数]); 该方法重复调用一个函数，每隔一个时间段就执行一次回调函数
  （window可以省略；间隔的毫秒数默认是0；第一次执行也是间隔一段时间之后）

• 停止定时器
  window.clearInterval(intervalID); 取消先前通过调用serInterval()方法建立的定时器
  （window可以省略；参数就是定时器的标识符）

1.6 this指向问题

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向的是那个调用它的对象。

1. 全局作用域或者普通函数中this指向全局对象window（ 注意定时器里面的this指向window）
2. 方法调用中谁调用this指向谁
3. 构造函数中this指向构造函数的实例

1.7 location对象

window对象提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以也称这个属性为location对象。

URL

统一资源定位符（Uniform Resource Locator，URL） 是互联网上标准资源的地址。互联网上每一个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器该怎么处理它。
一般语法格式为：protocol://host[:port]/path/[?query]#fragment

组成	说明
protocol	通信协议 常用的http、ftp、maito等
host	主机（域名）
port	端口号 可选，省略时使用方案的默认端口 如http的默认端口为80
path	路径 由零或多个‘/’符号隔开的字符串，一般用来表示主机上的一个目录或文件地址
query	参数 以键值对的形式，通过&符号分隔开
fragment	片段 #后面的内容 常见于链接 锚点

location 对象的属性

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

location对象的常见方法

location对象方法	返回值
location.assign()	可以跳转页面（重定向页面），记录历史
location.replace()	替换当前页面，不记录历史
location.reload()	重新加载页面 当参数为true时强制刷新

1.8 navigator对象

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

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

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    window.location.href = "";     //手机
 } else {
    window.location.href = "";     //电脑
 }

1.9 history对象

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

history对象方法	作用
back()	后退功能
forward()	前进功能
go(参数)	前进后退功能 参数1时前进一个页面，参数为-1时后退一个页面

2. JS执行机制

2.1 JS 是单线程

JavaScript语言的一大特点就是单线程，也就是说，同一个事件只能做一件事。

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

2.2 同步任务和异步任务

单线程导致的问题就是后面的任务等待前面任务完成，如果前面任务很耗时（比如读取网络数据），后面任务不得不一直等待。为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程，但是子线程完全受主线程控制。于是，JS 中出现了同步任务和异步

同步：前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。
异步：在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。

JS中所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。
同步任务：在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；
异步任务：不进入主线程、而进入”任务队列”的任务，当主线程中的任务运行完了，才会从”任务队列”取出异步任务放入主线程执行。

2.3 JS执行机制（事件循环）

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