图解：window与BOM的关系

2016-10-18 本文已影响238人查查查查查查克

我们知道，DOM（文档对象模型）是为了操作文档而定义的一组接口，而BOM（浏览器对象模型）则是为了操作浏览器而定义的一组接口。这很好理解，通过命名就能知道。真正有意思的地方在于，基于JavaScript的“对象系统”（《浅析JavaScript的对象系统》），我们似乎只通过一个对象就能拿到我们需要的几乎所有东西，原生函数、自定义函数、全局变量、DOM、浏览器属性。。。没错，这个“包罗万象”的对象就是——window。

document是DOM的核心对象，window则是BOM的核心对象，而又有：

console.log(window.document === document);    //true

因为document是DOM的根节点，而以上代码又表明：document在window对象中是作为其一个属性而存在的，因此从这个角度来说，BOM包含了DOM。与此类似，你还可以验证如下代码：

console.log(window.location === location);    //true
console.log(window.navigator === navigator);    //true
console.log(window.screen === screen);    //true
console.log(window.history === history);    //true
console.log(window.window === window);    //true

location navigator screen history和window一样，都是BOM提供的对象，只不过它们和document对象一样，都同时以属性的形式存在于window中。上面的测试似乎有些多此一举，但为了验证window作为“根”的角色，这些测试都是有意义的。

当你在浏览器中console.log(window)，你应该能大体归纳出其构成如下图：

window中包含了什么

可以看到，window可不仅仅是BOM中的那个浏览器窗口对象而已，它实际上包含了某个页面所在的窗口中与JavaScript相关的方方面面。但是，我们明明说“window是BOM的核心对象”啊，BOM本身只提供对浏览器的操作接口，从这个角度来说，window跟与浏览器窗口无关的那些什么原生构造函数、全局变量/函数有半毛钱关系？为什么它们会存在于window当中？实际上：

ECMAScript 虽然没有指出如何直接访问 Global 对象，但 Web 浏览器都是将这个全局对象作为 window 对象的一部分加以实现的。—— 《JavaScript高级程序设计（第3版）》

也就是说，Global对象被整个整合进了window，这才使得后者同时拥有了BOM和Global。

下面我们先抛开这个大大的window，把范围缩小，来梳理一下BOM。

window —— 浏览器窗口

从BOM的角度来看window，它瞬间就Low了不少。此时window表示的就是一个浏览器窗口对象，强调的是“浏览器窗口”。下图是对其的整理归纳，列出了大部分常用的属性和方法。其中亮黄色部分是我们实际开发中经常会用到的，相关使用细节自行测试实践即可，并不难，这里不再详述。

BOM-window

location —— 页面URL

BOM-location

navigator —— 浏览器信息

不同浏览器提供的navigator对象支持的属性差别不小，而且有些属性的结果并不尽如人意，比如几乎所有浏览器的navigator.appCodeName的结果都为Mozilla，这似乎难以理解。因为这些原因，navigator对象并不是很常用，尽管各浏览器为该对象提供的属性并不少。检测浏览器类型和版本就需要通过navigator对象，具体如何操作请自行了解。

BOM-navigator

screen —— 显示器屏幕

不同浏览器中的screen对象也都包含着不同的属性，具体请自行Google。screen对象极少用到，了解即可。

history —— 浏览历史记录

BOM-history

可能到这里，你还不是很清楚window和BOM之间的关系。其实说白了就是：window是BOM的核心对象，但同时，window又是ECMAScript中的Global对象的超集。也就是说，在浏览器中window有着双重角色，我们可以分别从BOM(浏览器)和Global(ECMAScript)两个角度去理解。

最后，上一张完整的图：

window