学习 BOM-window

什么是 `BOM`?

BOM 是 Browser Object Model 的缩写，译为浏览器对象模型。ES 官方把 BOM 描述为 JS 的核心，但实际上 BOM 是使用 JS 开发 WEB 应用程序的核心。

`BOM` 的核心 - `window` 对象

window 对象是浏览器的实例，它在浏览器中有两重分身，一个是 ES 中的 Global 对象，另一个就是浏览器窗口的 JS 接口。这意味着网页中定义的所有对象、变量和函数都以 window 作为其 Global 对象。听着是不是有点绕口？下面是 ChatGPT 给出的解释：

在浏览器环境中，JavaScript 代码会在一个名为 window 的全局对象上执行。这意味着，如果在网页中定义了对象、变量或函数，它们都会被附加到 window 对象上作为其属性或方法。

例如，如果在网页中定义了一个全局变量 name，它实际上会被存储在 window 对象上，可以通过 window.name 或者直接 name 来访问。同样，如果在网页中定义了一个全局函数 sayHello()，它也会被附加到 window 对象上，可以通过 window.sayHello() 或者直接 sayHello() 来调用。

换句话说，window 对象充当了浏览器环境中 JavaScript 代码的全局作用域，网页中定义的所有对象、变量和函数都会成为 window 对象的属性或方法，从而可以在整个页面中访问和使用。

`Global` 作用域

因为 window 对象被复用为 ES 的 Global 对象，所以通过 var 声明的所有全局变量和函数都会变成 window 对象的属性和方法，这就是上面 ChatGPT 解释的内容。

窗口关系

top 对象始终指向最外层窗口，即浏览器窗口本身。而 parent 对象则始终指向当前窗口的父窗口。最上层的 window 如果不是通过 window.open() 打开的，那么其 name 属性就不会包含值。

还有一个 self 对象，它始终指向 window。其实它们也是同一个对象，之所以这么做，是为了和 top、parent 保持一致，并可以在 Web Workers 等环境中使用到与 window 相同的 self 对象。

窗口位置

我们可以使用 moveTo() 和 moveBy() 方法来移动窗口。这俩个方法都接受两个参数，其中 moveTo() 接收的是新位置的绝对坐标 x 和 y；而 moveBy() 接受两个方向上的相对像素数。

窗口大小

现在浏览器支持 4 个关于窗口大小的属性：innerWidth innerHeight outerWidth outerHeight。outer 和 inner 的区别就是：inner 返回浏览器窗口中页面视图的大小，这是不包括浏览器边框和工具栏的；而 outer 则是浏览器窗口自身的大小，不管是在最外层的 window 上，还是在 <frame> 中。

浏览器窗口本身的精确尺寸不好确定，但可以确定页面视口的大小，如下：

let pageWidth = window.innerWidth,
  pageHeight = window.innerHeight
if (typeof pageWidth != 'number') {
  if (document.compatMode == 'CSS1Compat') {
    pageWidth = document.documentElement.clientWidth
    pageHeight = document.documentElement.clientHeight
  } else {
    pageWidth = document.body.clientWidth
    pageHeight = document.body.clientHeight
  }
}

视口位置

度量文档相对于视口滚动距离的属性有两对，返回相等的值：window.pageXoffset/window.scrollX 和 window.pageYoffset/window.scrollY。

可以使用 scroll()、scrollTo() 和 scrollBy() 方法滚动页面。其中 scrollBy() 表示的是相对于视口的滚动距离，前两个是相对视口要滚动到的坐标。

什么是 BOM?

BOM 的核心 - window 对象

Global 作用域