JS之BOM

BOM即浏览器对象模型，提供了独立于浏览器窗口进行交互的对象，其核心对象是window。

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

BOM与DOM的对比：

window对象

是浏览器的顶级对象，具有双重角色。

• 是js访问浏览器窗口的一个接口
• 是一个全局对象，定义在全局作用域中的变量，函数会变成window对象的属性和方法。（在调用时省略window）

window对象常见事件

窗口加载事件window.onload

 当文档内容完全加载完成会触发该事件（包括图像、脚本文件、CSS文件等).

当有了window.onload后就可以把JS书写在页面元素上方。但是window.onload传统注册事件按方式只能写一次，如果有多个，会以最后一个window.onload为准，使用第二个方法就不会存在该冲突问题。

 

 DOMContentLoaded事件触发时，仅当DOM加载完成，不包括css，图片等。(I9以上支持）

如果页面的图片很多，从用户访问到onload触发可能需要较长的时间，交互效果就不能实现，必然会影响用户的体验，此时用DOMContentLoaded事件更合适。

调整窗口大小事件

 window.onresize是调整窗口大小加载事件，当触发时就调用的处理函数。只要窗口大小发生变化就会触发该事件。

常利用该事件完成响应式布局。window.innerWidth为当前屏幕的宽度

定时器

setTimeout()

用于设置一个定时器，该定时器在定时器到期后执行调用函数。

该window在调用时可以省略。 

页面中可能有很多的定时器，这时可以给定时器加标识符。 

setTimeout中的调用函数也称回调函数callback(等上一件事情干完再回头调用该函数，例如element.οnclick=function(){}也是回调函数）

clearTimeout()

 该方法取消了先前通过调用色图Timeout（）建立的定时器，里面的参数就是定时器的标识符。

setInterval()

 

 setTimeout延时时间到了就去调用回调函数，只调用一次就结束这个定时器。

setInterval每隔延时时间就去调用回调函数，会调用多次，重复调用该函数。

clearInterval()

 注意标识符要为全局变量。

this指向问题

1、全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）

2、方法调用中谁调用this指向谁

var o={
    hello: function(){
        console.log(this);
    }
}
o.hello();
//此时this指向的是o对象

3、构造函数中this指向构造函数的实例

function Fun(){
    console.log(this);
}
var fun = new Fun();
//此时新开辟了一个空间，this就指向这个空间

 JS执行队列

JS最大的特点就是单线程，同一时间只能做一件事情。但是这样会导致一个问题：如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。为了解决该问题出现了同步与异步。

同步和异步

同步：前一个任务结束后再执行后一个任务，程序的执行顺序与任务排列顺序一致且同步。

异步：在执行该任务同时还执行其他任务。

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

异步任务：JS的异步是通过回调函数实现的，相关惠帝导函数添加到任务队列（消息队列）中有以下三种类型。

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

JS执行机制

1. 先执行栈中的同步任务
2. 异步任务（回调函数）放入任务队列当中
3. 一旦执行栈中所有的同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是异步任务进入执行栈开始执行。

location对象

location属性用于获取或设置窗体的URL，并且可以用于解析URL，由于该属性返回的是一个对象，所以将该属性也称为location对象。

location对象的方法

 assign（）方法记录浏览历史可以后退页面。

navigator对象

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

以下代码可以判断用户在哪个终端打开网页，实现跳转：

 history对象

与浏览器历史记录实现交互，该对象包含用户（在浏览器窗口中）访问过的URL。