什么是 BOM

BOM 即瀏覽器對象模型（browser object model），其提供了一系列接口供開發者使用 JavaScript 與瀏覽器窗口進行交互。

BOM 不像 ECMAScript 和 DOM 有一套自己的標準，BOM 是沒有公共組織制定標準的。
神奇的是所有現代瀏覽器在 BOM 的相關內容上幾乎一致，所以 BOM 也足夠通用，所有瀏覽器的實現幾乎一致。

1. BOM 的作用

BOM 提供的是與瀏覽器窗口交互的能力，其包含了一些處理窗口的方法，如打開新窗口，控制新窗口大小，也提供了窗口相關的屬性，如窗口尺寸。

BOM 的操作入口可以理解為 window 對象，即瀏覽器下的全局對象。

window.location.href = '//imooc.com'; // 跳轉

window.onload = function() {
  // 當前窗口的頁面加載完畢做的事情
};

window.open('https://immoc.com'); // 打開新的窗口

window.navigator.userAgent; // 獲取 UA

2. 理解 BOM、DOM、JS 的關系

部分讀者可能會進入一個難以理解的怪圈。

全局的對象，如 String、Boolean、Function，或者一些方法 parseInt，isNaN，甚至是 DOM 的入口 document，這些都是被放在 window 下供開發者訪問的。

而 BOM 沒有自己的標準，也基本和這些東西沒有半毛關系，為什么這些內容會被放在作為 BOM 操作的入口的 window 對象下呢？

之前也有提過，JavaScript 有他自己獨立的標準，本身是不具備和瀏覽器交互的特性的，交互的接口都由瀏覽器來提供。

在 ECMAScript 的標準中，這些全局的對象都是被放在 Global 上的，而標準又沒指出如何直接訪問 Global 對象，所以在瀏覽器上這個所謂的 Global 就被 window 對象所替代，所有 Global 下的內容全部被放到了 window 下。

window 對象就這樣作為了全局對象，并且 DOM 相關的內容，與窗口交互的方式都放在了 window 對象下。

擴展：globalThis

globalThis 指向當前環境的全局的this，也可以理解為指向全局對象。
這個屬性在瀏覽器中指向的就會是 window，而在 node 環境下指向的就是 global。
這個屬性最大的好處就是開發通用的庫不必要再使用 window 或 global 這樣的標志性對象來判斷當前的宿主環境。
需要注意的是 globalThis 還是試驗性的內容，chrome 和 新版本的 node 已經支持。

3. window.window.window.window…window

window 對象下還有一個名為 window 的屬性，其指向 window 對象。

也就是說可以像套娃一樣無限套。

這樣設計也是有原因的，假設沒有 window.window 這個屬性，那就訪問不到全局的 window 了，這就等于不能直接訪問到全局對象，如果想要訪問直接訪問 window 對象，則必須自建一個變量用于放置 window 對象。

var window = this; // 在代碼最外層

window.location.href = 'https://imooc.com';

4. 小結

BOM 沒有自己的標準，在瀏覽器中 window 對象就是 BOM 相關內容的入口。

window 對象是 BOM 相關內容的入口。

在瀏覽器環境中，window 對象就是全局對象，所有 DOM 相關內容與 ECMAScript 描述的全局對象等內容也被放在 window 對象下。