[!info] related notes

• 所属 MOC: javascript-in-browser-moc, javascript-moc
• 上位主题: javascript-in-browser, javascript-bom
• 相邻主题: location-object, history-object, navigator-object, screen-object, browser-client-storage, this-keyword

Window 对象

window 是浏览器里最核心的宿主对象之一：它既承接全局变量访问，也代表当前浏览器窗口或标签页的脚本接口。

一句话定义

window 是浏览器环境里 JavaScript 的主要全局对象，同时也是当前页面所在浏览器窗口的脚本入口。

为什么它重要

理解 BOM 时，window 是第一站，因为很多浏览器对象和方法都从它进入：

• window.location
• window.history
• window.navigator
• window.screen
• window.document
• window.setTimeout()

很多时候代码里会省略 window. 前缀，但实际宿主入口仍然是它。

双重身份

1. 作为全局对象入口

在浏览器传统脚本环境里，很多全局变量和全局函数都会挂到 window。

例如：

var userName = 'baker'

console.log(window.userName) // 'baker'
console.log(window.parseInt === parseInt) // true

但要注意：

• let / const 顶层声明不会自动变成 window 属性
• ES Module 顶层作用域也不会像旧脚本那样自动挂到 window

2. 作为窗口接口

window 还代表当前标签页或窗口本身，负责暴露：

• 视口尺寸
• 滚动位置
• 打开新窗口
• 弹窗
• 定时器
• 页面级事件

常见成员

子对象入口

• document
• location
• history
• navigator
• screen
• localStorage
• sessionStorage

常见方法

• open()
• close()
• alert()
• confirm()
• prompt()
• setTimeout()
• setInterval()
• scrollTo()

常见属性

• innerWidth
• innerHeight
• scrollX
• scrollY
• devicePixelRatio

最常见的窗口行为

读取视口尺寸

console.log(window.innerWidth)
console.log(window.innerHeight)

这类值更接近当前页面可见区域，不等于物理屏幕大小。物理屏幕看 screen-object。

滚动页面

window.scrollTo({
  top: 0,
  behavior: 'smooth',
})

常和 scrollX、scrollY 一起使用。

打开新窗口或标签页

window.open('https://example.com', '_blank')

要注意现代浏览器通常要求这类调用发生在用户手势之后，否则可能被拦截。

使用定时器

const id = window.setTimeout(() => {
  console.log('done')
}, 1000)

window.clearTimeout(id)

虽然平时常省略 window.，但浏览器环境里的宿主入口仍然是 window。

窗口级事件

window 常见事件包括：

• load
• resize
• scroll
• error
• beforeunload

例如：

window.addEventListener('resize', () => {
  console.log(window.innerWidth)
})

和其他对象的关系

window 和 document

• window 代表窗口和宿主环境入口
• document 代表当前页面文档

也就是：

• 看窗口行为找 window
• 看 DOM 结构找 document

window 和 BOM

window 是 BOM 的核心入口，但 BOM 不只等于 window 一个对象。更完整的对象簇见：

• javascript-bom
• location-object
• history-object
• navigator-object
• screen-object

window 和全局作用域

浏览器里经常把“全局作用域”和 window 混为一谈，但严格说：

• 传统脚本里，很多全局标识符会映射到 window
• 模块脚本和块级声明已经让这种映射不再完全成立

最小示例

console.log(window.location.href)
console.log(window.innerWidth)

window.addEventListener('load', () => {
  console.log('page loaded')
})

边界与易混淆点

• window 是 BOM 的核心，不等于 DOM 本身
• Worker 环境没有 window，而是 self，见 browser-web-workers
• window.screen 不是视口尺寸，视口看 innerWidth/innerHeight
• 不是所有顶层声明都会挂到 window

最短记忆方式

window 一半是全局对象，一半是浏览器窗口接口；理解它，就等于抓住了 BOM 的总入口。

Related notes

• JavaScript BOM
• 浏览器
• JavaScript in Browser