JavaScript学习笔记（BOM）（四）

一.BOM概述
1.BOM是浏览器对象模型，提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。
2.DOM与BOM的区别

DOM	BOM
文档对象模型	浏览器对象模型
把文档当作一个对象来看待	把浏览器当作一个对象来看待
顶级对象是document	顶级对象是window
主要学习操作页面元素	学习浏览器窗口交互的对象
是W3C标准规范	是浏览器厂商在各自浏览器上定义的，兼容性较差

注意：window对象是浏览器的顶级对象，具有双重角色：
①它是JS访问浏览器窗口的一个接口；
②它是一个全局对象，定义在全局作用域中的变量、函数都会变成window对象的属性和方法。在调用时可以省略window，对话框也属于window对象方法。
③window的下一个特殊属性window.name是存在的，为一个空值，在定义变量或者函数的时候尽量不用name

二.window常用的事件对象
1.窗口加载事件：window.load是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像、脚本文件、CSS文件等），就调用的处理函数。

window.onload = function(){}
或者
window.addEventListener('load',function(){})
或者
document.addEventListener('DOMContentLoaded',function(){})

注意：①有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行处理函数。
②window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准。如果使用addEventListener就没有限制。
③DOMContentLoaded是DOM加载完毕（不包含图片、flash、CSS等）就可以执行，加载速度要比load快。
2.调整窗口大小事件:window.onresize是调整窗口大小加载事件，当触发时就调用的处理函数。

window.onresize = function(){}
或者
window.addEventListener('resize',function(){})

注意：①只要窗口大小发生像素变化，就会触发这个事件。
②主要应用于响应式布局，window.innerWIdth表示当前屏幕的宽度。
3.定时器
（1）setTimeout定时器：window.setTimeout(调用函数，[延迟的毫秒数])用于设置一个定时器，该定时器在定时器到期后执行调用函数。
注意：①window可以省略；
②这个调用可以直接写函数，或者写函数名；
③延迟的毫秒数省略默认是0；
④定时器可能有很多，可以给定时器赋值一个标识符
（2）停止clearTimeout()定时器：window.clearTimeout(定时器名字)，用于取消先前通过调用setTimeout()建立的定时器。
（3）setInterval()定时器：window.setInterval(回调函数，[间隔毫秒数])，用于重复调用一个函数，每隔这个时间，就去调用一次回调函数。
（4）停止setInterval()定时器：window.clearInetrval(定时器名字)
4.this的指向问题
this的指向在函数定义时是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this最终指向的是那个调用它的对象。
①全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）
②方法调用中的this指向调用它的对象
③构造函数中的this指向构造函数的实例对象
5.JS的执行机制
（1）JS语言的一大特点就是单线程，也就是说，同一时间只能做一件事。
原因：JS这门脚本语言是为处理页面中用户的交互，以及操作DOM产生的。
问题：单线程意味着所有任务都需要排队，前一个任务结束，才会执行后一个任务。如果JS执行的时间过长，就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。
解决：利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JS脚本创建多个线程，因此在JS中出现了同步和异步，他们的本质区别是流水线上各个流程的执行顺序不相同。
①同步：前一个任务结束再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。
②异步：不等待，在执行一个任务的同时执行另一个任务。
（2）同步任务和异步任务的执行过程
①同步任务：同步任务在主线程上执行，形成一个执行栈
②异步任务：通过回调函数实现的。异步任务的三种类型：

• 普通事件，如click、resize
• 资源加载，如load、error
• 定时器，如setInterval、setTimeout等
  （3）执行机制
  ①先执行执行栈中的同步任务
  ②异步任务（回调函数）放入任务队列中
  ③一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，被读取的异步任务结束等待状态，进入执行栈开始执行。
  由于主线程不断地重复获取任务、执行任务、再获取任务、再执行，所以这种机制成为事件循环。
  6.location对象
  window对象提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。该属性返回的是一个对象，因此这个属性也成为location对象。
  （1）URL（统一资源定位符）是互联网标准资源的地址。互联网上的每个文件都有唯一的URL，包含的信息指出文件的位置以及浏览器应该怎么处理它。
  一般语法格式：protocol://host[:port]/path/[?query]#fragment
  |组成|说明 |
  |–|--|
  | protocol |通信协议 常用http/ftp/maito等 |
  |host|主机（域名）www.baidu.com|
  |port|端口号 可选，省略时使用协议的默认端口号，例如HTTP的默认端口号为80|
  |path|路径 由0个或多个’/'隔开的字符串，一般用来表示主机上的一个目录或文件地址|
  |query|参数 以键值对的形式通过&符号分隔开来|
  |fragment|片段 #后面内容常见于链接、锚点|
  （2）location对象的属性
  |location对象属性|返回值 |
  |–|--|
  |location.href |获取或者设置 整个URL |
  |location.host|返回主机（域名）|
  |location.port|返回端口号，如果未写返回空字符串|
  |location.pathname|返回路径|
  |location.search|返回参数|
  |location.hash|返回片段 #后面的内容|
  （3）location对象的方法
  |方法|返回值|
  |–|--|
  |location.assign() |跟href一样，可以跳转页面（ 重定向页面） |
  |location.replace()|替换当前页面，不记录历史，不能后退页面|
  |location.reload|重新加载页面，相当于刷新按钮|