BOM概述及其顶级对象window的属性和方法

1.BOM概述

1.1 什么是BOM

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

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

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

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

1.2 BOM的构成

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

它是JS访问浏览器窗口的一个接口。
它是一个全局对象。定义在全局作用域的变量、函数都会变成window对象的属性和方法。

2.window对象的常见事件

2.1 窗口加载事件

// 传统注册方式
window.onload = function() {
    
    }
or
window.addEventListener('load/DOMContentLoaded',function(){
    
    })

注意：

有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行处理函数
window.onload 传统注册方式只能写一次，如果有多个，就会以最后一个window.onload为准。
如果使用addEventListener则没有限制
load：当文档内容完全加载完成会触发该事件（包括图像、脚本文件、CSS文件等）
DOMContentLoaded是DOM加载完毕，不包含图片 flash css等（加载速度比load快）

2.2 调整窗口大小事件

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

只要窗口大小发生像素变化，就会触发这个事件。
经常利用这个事件完成响应式布局。window.innerWidth当前屏幕的宽度

3.定时器

3.1 两种定时器

setTimeout()

setTimeout(function(){
      
      ...},延时时间)
// 1. 延时时间单位是毫秒，可省略，默认为0
// 2. 页面中可能有多个计时器，所以经常给计时器赋值一个标识符（变量名）。
// 3. 这个调用函数，可以直接写函数名不加小括号，把函数内容写在外面

setInterval()
```
setInterval(调用函数,间隔时间)
```

二者区别：setTimeout：延时时间到了就调用，调用一次便结束；setInterval：每隔这个时间间隔就调用，调用多次。

3.2 停止定时器

clearTimeout(定时器名)
or
clearInterval(定时器名)

3.3 this 指向问题

一般情况下this的最终指向的是那个调用它的对象

全局作用域或者普通函数中 this指向全局对象window(注意定时器里面的this指向window)
方法调用中谁调用this执行谁
构造函数中this指向构造函数的实例

<scrip>
    // 1.全局作用域或者普通函数中 this指向全局对象window(注意定时器里面的this指向window)
	console.log(this);//window
    
    function fn() {
    	console.log(this);//window
	}
    setTimeout(function() {
    	console.log(this); //window
    }, 1000)
    
    // 2. 方法调用中谁调用this执行谁
    var o = {
    		sayHi: function() {
    			console.log(this);//o
    	}
    }
    o.sayHi();
    // 3. 构造函数中this指向构造函数的实例
    function Fun() {
    	console.log(this); //this 指向fun实例对象
    }
    var fun = new Fun();
</scrip>

4. JS 执行机制

4.1 JS 是单线程

JavaScript语言的一大特点就是单线程，也就是说同一时间只能做一件事。这就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。导致的问题就是：如果JS执行的时间过长，这样就会造成页面渲染不连贯，导致页面渲染加载阻塞的感觉。

4.2 同步和异步

为了解决上述问题，利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程。

同步任务

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

异步任务

JS的异步是通过回调函数实现的。

一般而言，异步任务有以下三种类型：

事件，如click,resize等
资源加载，如load、error等
定时器，包括setInterval、setTimeout等

异步任务相关回调函数添加到任务队列中（任务队列也称为消息队列）

4.3 JS 执行机制

先执行执行栈中的同步任务。
异步任务（回调函数）放入任务队列中。
一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

案例一：

console.log(1);
setTimeout(function() {
    
    
    console.log(2);
},0);
console.log(3);
//打印结果是 1 3 2

案例二：

console.log(1);
document.onclick = function() {
    
    
    console.log('click');
}
console.log(2);
setTimeout(function() {
    
    
    console.log(3);
}, 3000)
// 分析
// 1. console.log(1); 同步任务 打印1
// 2. document.onclick = fn;异步任务，提交给异步进程程序，等到发生点击事件时，再把该任务放进任务队列中
// 3. console.log(2); 同步任务 打印2
// 4. setTimeout(fn, 3000); 异步任务，三秒后放入任务队列中
// 5. 打印 1 2 后 同步任务执行完毕 会去任务队列查看有没有异步任务
//总结：三秒钟之前点击 打印 1 2 click 3
// 三秒钟之后点击 打印 1 2 3 click
//由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，这种机制被称作事件循环(event loop)

5.location对象

5.1 什么是 location 对象

window对象给我们提供了一个location属性用于获取或设置窗体的URL,并且可以用于解析URL.

5.2 location 对象的属性

location.href：获取或设置整个URL
location.host：返回主机（域名）
location.port：返回端口号
location.pathname：返回路径
location.search：返回参数
location.hash：返回片段 #后面内容常见于锚点连接

5.3 location对象的方法

location.assign()：跟href一样，可以跳转页面(也成为重定向页面),可后退
location.replace()：替换当前页面，因为不记录历史，所以不能后退页面
location.reload()：重新加载页面，相当于刷新按钮或者f5,如果参数为true强制刷新 ctrl+f5

6.navigator 对象

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

7.history 对象

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

history对象方法

back()：后退功能
forward()：前进功能
go(参数)：参数为1表前进1个页面，为-1表后退1个页面。