Window 对象详解：与浏览器窗口直接对话的入口
上一节我们聊了BOM的整体结构，知道了 window 是顶层对象。这一节我们把焦点放在 window 对象本身，看看它提供哪些直接可用的方法，以及在开发中怎么用它们来解决具体问题。
先厘清一个概念：window 不属于 JavaScript
有个细节值得注意：window 对象是浏览器创建并提供的，它不属于 JavaScript 语言本身。JavaScript 语言层面的对象是 String、Array、Date 这些。window 是浏览器环境给 JavaScript 运行时的“外挂装备”。
个人见解： 理解这一点有助于区分“语言特性”和“环境特性”。当你的 JavaScript 代码跑到 Node.js 环境里运行时，就没有 window 对象了，取而代之的是 global。所以 window 是浏览器的专属 API。
帧页面与 window 对象
如果页面中使用了 <iframe> 或 <frame> 嵌入其他页面，浏览器会为每一个框架单独创建一个 window 对象。这意味着，父页面和嵌入的 iframe 页面有各自独立的 window 上下文，它们之间需要通过特定方式（如 contentWindow）进行通信，不能直接混用变量。
window 对象的核心方法
下面这几个方法是操作浏览器窗口最常用的，我们逐一过一遍，每个都配上可以直接运行的示例。
1. alert() —— 简单直接的提示框
alert() 弹出一个只有“确定”按钮的消息框。它较大的特点是会阻塞代码执行，用户点确定之前，后面的代码不会运行。
示例：点击按钮弹出提示
<script>
function showMessage() {
alert("欢迎来到代码号学习编程，这是一条提示信息");
}
</script>
<input type="button" value="显示提示" onclick="showMessage()" />
个人经验： alert 在调试代码时非常方便，但正式项目中不建议用来做主要交互，因为它会中断用户体验。调试时我更喜欢用 console.log，只有在需要强制用户注意某条信息时才用 alert。
2. confirm() —— 带选择的确认框
confirm() 会弹出带有“确定”和“取消”按钮的对话框。它的返回值是布尔值：点确定返回 true，点取消返回 false。
示例：删除前的二次确认
<script>
function deleteRecord() {
let userConfirmed = confirm("确定要删除这条记录吗？操作不可撤销。");
if (userConfirmed) {
alert("已删除");
// 这里可以写实际的删除逻辑
} else {
alert("已取消删除");
}
}
</script>
<input type="button" value="删除记录" onclick="deleteRecord()" />
个人建议： 对于删除、提交表单这类“不可逆”的操作，加上 confirm 做二次确认是一个好习惯，能有效减少用户误操作带来的问题。
3. prompt() —— 获取用户输入的对话框
prompt() 会弹出一个带输入框的对话框，用户输入内容后，点击确定返回输入的字符串，点击取消返回 null。
示例：询问用户名并打招呼
<script>
function askName() {
let userName = prompt("请问怎么称呼您？");
if (userName !== null && userName !== "") {
alert("你好，" + userName + "，欢迎访问代码号学习编程");
} else if (userName === "") {
alert("您没有输入任何内容");
} else {
alert("您取消了输入");
}
}
</script>
<input type="button" value="打招呼" onclick="askName()" />
个人见解： prompt 适合做极简的输入获取场景，比如临时收集一个简单信息。但如果需要收集多个字段或做复杂校验，还是用表单更合适，prompt 样式不可控且用户体验相对粗糙。
4. open() —— 打开新窗口
open() 方法用于打开一个新的浏览器窗口或标签页。它可以指定要加载的 URL、窗口名称、窗口特性等。
示例：在新窗口打开链接
<script>
function openNewWindow() {
window.open("https://www.ebingou.cn/biancheng/", "_blank");
}
</script>
<input type="button" value="打开学习页面" onclick="openNewWindow()" />
注意事项： 现在浏览器对 open() 有限制，如果不是由用户直接触发的点击事件调用，可能会被拦截。因此这个方法一般写在按钮的点击回调里才安全。
5. close() —— 关闭当前窗口
close() 用于关闭当前窗口。但如果窗口不是由 JavaScript 打开的，浏览器通常会询问用户是否确认关闭，以防止恶意脚本关掉用户正常浏览的页面。
示例：关闭当前窗口（谨慎使用）
<script>
function closeWindow() {
let confirmClose = confirm("确认要关闭当前页面吗？");
if (confirmClose) {
window.close();
}
}
</script>
<input type="button" value="关闭窗口" onclick="closeWindow()" />
6. setTimeout() —— 延迟执行
setTimeout() 用于在指定的毫秒数之后执行一段代码或一个函数。它是 JavaScript 异步编程中最基础的方法之一。
示例：2秒后弹出欢迎语
<script>
function delayedWelcome() {
setTimeout(function() {
alert("延迟2秒后出现的欢迎语，来自代码号学习编程");
}, 2000);
}
</script>
<input type="button" value="延迟提醒" onclick="delayedWelcome()" />
个人经验： setTimeout 经常用在需要“等一下再做某件事”的场景，比如防抖处理、延迟加载提示、模拟网络请求响应等。要记得它返回的是一个 timeoutId，如果需要提前取消，可以用 clearTimeout()。
本节课程知识要点
| 方法 | 用途 | 返回值 | 常用场景 |
|---|---|---|---|
alert() |
纯提示 | 无 | 调试、简单消息通知 |
confirm() |
确认选择 | Boolean | 删除确认、重要操作前确认 |
prompt() |
获取单条输入 | String / null | 获取用户名、简短信息 |
open() |
打开新窗口 | 新窗口对象 | 外链跳转、弹窗功能 |
close() |
关闭窗口 | 无 | 关闭弹窗或自开启页面 |
setTimeout() |
延迟执行 | timeoutId | 延迟加载、动画延迟、防抖 |
个人建议： 这些方法虽然基础，但组合使用能实现不少实用功能。比如可以用 setTimeout 配合 alert 做“定时提醒”，也可以用 confirm 配合 open 实现“确认后跳转”。关键是理解每个方法的行为特性，尤其是它们会阻塞代码执行还是异步执行，这对写出流畅的交互逻辑很重要。
下一节我们会深入 window 对象下那些“看不见但天天用”的属性，比如 innerWidth、innerHeight、scroll 等，看看它们如何帮我们实现响应式交互。
