一、核心概念与定位
window 对象是浏览器环境中 JavaScript 的全局对象，代表浏览器窗口（或标签页），也是前端 JavaScript 执行的顶级上下文。在浏览器中，所有全局变量、函数、DOM/BOM API 都属于 window 的属性或方法（如 document、setTimeout 本质是 window.document、window.setTimeout）。
二、核心功能与属性方法
1. DOM 操作相关
document属性：指向当前页面的 DOM 文档（window.document === document），是操作页面元素的入口（如getElementById、createElement）。window.innerWidth/innerHeight：获取窗口可视区域宽度/高度（含滚动条时的内部尺寸）。window.scrollX/scrollY：获取页面滚动的水平/垂直距离（ES6 后推荐用window.scrollTo()或element.scrollIntoView()操作滚动）。
2. BOM（浏览器对象模型）控制
- 窗口导航：
window.location：操作 URL（如location.href跳转页面，location.reload()刷新）。window.history：操作浏览器历史记录（history.back()回退，history.pushState()实现无刷新路由）。
- 窗口操作：
window.open(url, target)：打开新窗口（如window.open('_blank')）。window.close()：关闭当前窗口（仅能关闭通过 JS 打开的窗口）。
3. 定时器与异步控制
setTimeout(callback, delay)：延迟指定毫秒后执行回调（返回定时器ID，可通过clearTimeout取消）。setInterval(callback, delay)：周期性执行回调（通过clearInterval取消）。requestAnimationFrame(callback)：浏览器下一帧绘制前执行回调（动画优化首选）。
4. 全局上下文与作用域
- 在浏览器环境中，全局变量会自动成为
window的属性（如var a = 1等价于window.a = 1），但let/const声明的变量不会挂载到window上。 - 函数中的
this在非严格模式下默认指向window（如function fn() { console.log(this); } fn(); // 输出 window）。
5. 浏览器事件与交互
- 事件监听：
window.addEventListener('resize', () => { /* 窗口大小变化时触发 */ })。window.addEventListener('scroll', () => { /* 页面滚动时触发 */ })。
- 用户交互方法：
window.confirm('确认操作？')：弹出确认对话框（返回布尔值）。window.prompt('请输入内容', '默认值')：弹出输入框（返回用户输入）。
三、与其他环境的差异（Node.js）
- 浏览器环境：
window是全局对象，包含 DOM/BOM 相关 API。 - Node.js 环境：全局对象是
global，无window、document等浏览器特有的对象，取而代之的是fs、http等服务器端模块。
四、问题
1. window.onload 和 DOMContentLoaded 的区别？
DOMContentLoaded：当 HTML 解析完成、DOM 树构建完毕时触发（不等待图片、样式表等资源加载）。window.onload：当所有资源（图片、脚本、样式表等）加载完成后触发，触发时机更晚。
2. 如何在 Node.js 中模拟 window 对象？
- 若需在 Node 中运行浏览器端代码（如测试），可通过
jsdom库创建虚拟 DOM 环境，其会模拟window、document等对象。
3. window 对象的性能优化场景？
- 事件防抖/节流：在
scroll、resize等高频事件中，通过debounce或throttle减少回调执行频率（如滚动加载图片时）。 - 避免全局污染：将变量挂载到
window上时，使用命名空间（如window.myApp = {}），避免与其他库冲突。
五、总结
window 对象是浏览器端 JavaScript 的核心入口，整合了 DOM 操作、浏览器控制、异步处理等能力。理解其属性方法及与全局作用域的关系，是掌握前端浏览器编程的基础，也是框架底层实现（如事件循环、路由机制）的重要知识支撑。
