Window 对象：浏览器窗口的全能控制中心

Window 对象的双重身份

在 JavaScript 的世界里，window 对象扮演着独特的双重角色。一方面，它是浏览器窗口的代表，提供了控制窗口行为的各种方法；另一方面，它也是 JavaScript 的全局对象，所有全局变量和函数都挂载在它上面。

这就像一个公司的 CEO——既要管理整个公司的日常运作（全局对象），又要代表公司对外交流（浏览器窗口）。理解 window 对象的这两个身份，对于掌握 BOM 至关重要。

全局对象的角色

作为全局对象，window 是 JavaScript 运行环境的顶层对象：

javascript

// 全局变量实际上是 window 的属性
var companyName = "TechCorp";
let projectName = "WebApp"; // let 和 const 不会成为 window 的属性

console.log(window.companyName); // 'TechCorp'
console.log(window.projectName); // undefined

// 全局函数实际上是 window 的方法
function greet(name) {
  return `Hello, ${name}!`;
}

console.log(window.greet("Sarah")); // 'Hello, Sarah!'
console.log(greet === window.greet); // true

// 甚至可以省略 window 前缀
console.log(window.console === console); // true
console.log(window.alert === alert); // true

值得注意的是，使用 let 和 const 声明的变量不会成为 window 的属性：

javascript

var oldStyle = "I am on window";
let newStyle = "I am not on window";
const alsoNew = "Me neither";

console.log(window.oldStyle); // 'I am on window'
console.log(window.newStyle); // undefined
console.log(window.alsoNew); // undefined

// 但它们仍然在全局作用域中
console.log(newStyle); // 'I am not on window'
console.log(alsoNew); // 'Me neither'

浏览器窗口的角色

作为浏览器窗口对象，window 提供了与浏览器窗口交互的接口：

javascript

// 获取窗口信息
console.log("窗口内部宽度:", window.innerWidth);
console.log("窗口内部高度:", window.innerHeight);
console.log("窗口外部宽度:", window.outerWidth);
console.log("窗口外部高度:", window.outerHeight);

// 获取窗口位置
console.log("窗口左上角 X 坐标:", window.screenX);
console.log("窗口左上角 Y 坐标:", window.screenY);

// 检查窗口是否有滚动条
console.log("可滚动高度:", document.documentElement.scrollHeight);
console.log("视口高度:", window.innerHeight);

窗口尺寸与位置

了解窗口的尺寸和位置是进行响应式设计和窗口管理的基础。

窗口尺寸属性

window 对象提供了多个与尺寸相关的属性，理解它们的区别很重要：

javascript

// innerWidth / innerHeight - 视口尺寸（不包括浏览器边框和工具栏）
console.log("视口宽度:", window.innerWidth); // 例如: 1920
console.log("视口高度:", window.innerHeight); // 例如: 969

// outerWidth / outerHeight - 整个浏览器窗口的尺寸（包括边框和工具栏）
console.log("窗口总宽度:", window.outerWidth); // 例如: 1920
console.log("窗口总高度:", window.outerHeight); // 例如: 1080

// 计算浏览器控件占用的空间
const toolbarHeight = window.outerHeight - window.innerHeight;
console.log("浏览器工具栏高度:", toolbarHeight); // 例如: 111

视觉理解：

┌─────────────────────────────────────────┐  ← outerHeight (整个窗口)
│  浏览器标题栏、工具栏、标签页等          │
├─────────────────────────────────────────┤
│  ┌─────────────────────────────────┐    │
│  │                                 │    │  ← innerHeight (视口)
│  │    网页内容显示区域              │    │
│  │                                 │    │
│  └─────────────────────────────────┘    │
│  状态栏（如果有）                        │
└─────────────────────────────────────────┘
   └──────────────────────────────────┘
              innerWidth

实际应用：响应式尺寸检测

javascript

class ViewportManager {
  constructor() {
    this.breakpoints = {
      xs: 0, // Extra small devices (phones)
      sm: 576, // Small devices (phones)
      md: 768, // Medium devices (tablets)
      lg: 992, // Large devices (desktops)
      xl: 1200, // Extra large devices (large desktops)
      xxl: 1400, // Extra extra large devices
    };
  }

  getCurrentBreakpoint() {
    const width = window.innerWidth;

    if (width >= this.breakpoints.xxl) return "xxl";
    if (width >= this.breakpoints.xl) return "xl";
    if (width >= this.breakpoints.lg) return "lg";
    if (width >= this.breakpoints.md) return "md";
    if (width >= this.breakpoints.sm) return "sm";
    return "xs";
  }

  getViewportInfo() {
    return {
      width: window.innerWidth,
      height: window.innerHeight,
      breakpoint: this.getCurrentBreakpoint(),
      orientation:
        window.innerWidth > window.innerHeight ? "landscape" : "portrait",
      ratio: (window.innerWidth / window.innerHeight).toFixed(2),
    };
  }

  onResize(callback, delay = 250) {
    let timeoutId;

    window.addEventListener("resize", () => {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => {
        callback(this.getViewportInfo());
      }, delay);
    });
  }
}

// 使用示例
const viewportManager = new ViewportManager();

console.log("当前视口信息:", viewportManager.getViewportInfo());
// 输出: {
//   width: 1920,
//   height: 969,
//   breakpoint: 'xxl',
//   orientation: 'landscape',
//   ratio: '1.98'
// }

// 监听窗口大小变化
viewportManager.onResize((info) => {
  console.log("窗口大小已改变:", info);

  // 根据断点应用不同的样式或逻辑
  if (info.breakpoint === "xs" || info.breakpoint === "sm") {
    console.log("移动端布局");
  } else if (info.breakpoint === "md") {
    console.log("平板布局");
  } else {
    console.log("桌面布局");
  }
});

窗口位置属性

javascript

// screenX / screenY - 窗口相对于屏幕左上角的位置
console.log("窗口左边距:", window.screenX); // 或 window.screenLeft
console.log("窗口上边距:", window.screenY); // 或 window.screenTop

// 检测窗口是否最大化或全屏
function isWindowMaximized() {
  return (
    window.screenX === 0 &&
    window.screenY === 0 &&
    window.outerWidth === screen.width &&
    window.outerHeight === screen.height
  );
}

console.log("窗口是否最大化:", isWindowMaximized());

用户交互方法

window 对象提供了几个用于与用户交互的内置方法，虽然简单，但在某些场景下非常实用。

alert() - 警告对话框

alert() 显示一个带有消息的警告对话框：

javascript

// 基本用法
window.alert("欢迎访问我们的网站！");

// 可以省略 window
alert("这是一条重要消息！");

// 多行消息
alert("操作成功！\n\n您的数据已保存。\n请点击确定继续。");

// 实际应用：错误提示
function saveData(data) {
  if (!data || Object.keys(data).length === 0) {
    alert("错误：没有数据可保存！");
    return false;
  }

  // 保存数据的逻辑...
  alert("数据保存成功！");
  return true;
}

注意事项：

alert() 会阻塞代码执行，用户必须点击"确定"才能继续
现代 Web 开发中，通常使用自定义模态框替代 alert()
过度使用会影响用户体验

confirm() - 确认对话框

confirm() 显示一个带有"确定"和"取消"按钮的对话框：

javascript

// 基本用法
const userConfirmed = confirm("确定要删除这条记录吗？");

if (userConfirmed) {
  console.log("用户点击了确定");
  // 执行删除操作
} else {
  console.log("用户点击了取消");
  // 取消操作
}

// 实际应用：删除确认
function deleteUser(userId) {
  const confirmed = confirm("此操作将永久删除用户数据！\n\n确定要继续吗？");

  if (confirmed) {
    // 调用删除 API
    console.log(`删除用户 ${userId}`);
    return true;
  }

  console.log("取消删除操作");
  return false;
}

// 实际应用：离开页面确认
window.addEventListener("beforeunload", (event) => {
  const hasUnsavedChanges = true; // 实际应用中检查表单状态

  if (hasUnsavedChanges) {
    const message = "您有未保存的更改，确定要离开吗？";
    event.returnValue = message; // 标准方式
    return message; // 某些浏览器需要
  }
});

prompt() - 输入对话框

prompt() 显示一个带有输入框的对话框：

javascript

// 基本用法
const userName = prompt("请输入您的名字：");

if (userName !== null) {
  // 用户点击了确定
  console.log("欢迎,", userName);
} else {
  // 用户点击了取消
  console.log("用户取消了输入");
}

// 带默认值
const age = prompt("请输入您的年龄：", "18");
console.log("输入的年龄:", age);

// 实际应用：简单的用户输入
function getUserPreferences() {
  const name = prompt("请输入您的名字：");

  if (!name) {
    alert("名字不能为空！");
    return null;
  }

  const email = prompt("请输入您的邮箱：");

  if (!email || !email.includes("@")) {
    alert("请输入有效的邮箱地址！");
    return null;
  }

  return { name, email };
}

// 实际应用：密码验证
function checkPassword() {
  const password = prompt("请输入密码以继续：");
  const correctPassword = "secret123";

  if (password === correctPassword) {
    alert("密码正确！");
    return true;
  } else if (password !== null) {
    alert("密码错误！");
  }

  return false;
}

现代替代方案

虽然 alert()、confirm() 和 prompt() 仍然可用，但现代 Web 开发更倾向于使用自定义模态框：

javascript

// 自定义确认对话框示例
class CustomDialog {
  static confirm(message) {
    return new Promise((resolve) => {
      // 创建对话框 DOM
      const dialog = document.createElement("div");
      dialog.className = "custom-dialog";
      dialog.innerHTML = `
        <div class="dialog-overlay"></div>
        <div class="dialog-content">
          <p>${message}</p>
          <div class="dialog-buttons">
            <button class="btn-cancel">取消</button>
            <button class="btn-confirm">确定</button>
          </div>
        </div>
      `;

      document.body.appendChild(dialog);

      // 绑定事件
      dialog.querySelector(".btn-confirm").onclick = () => {
        document.body.removeChild(dialog);
        resolve(true);
      };

      dialog.querySelector(".btn-cancel").onclick = () => {
        document.body.removeChild(dialog);
        resolve(false);
      };
    });
  }
}

// 使用自定义对话框
async function deleteItem(itemId) {
  const confirmed = await CustomDialog.confirm("确定要删除此项吗？");

  if (confirmed) {
    console.log(`删除项目 ${itemId}`);
  }
}

窗口控制方法

window 对象提供了打开、关闭和控制窗口的方法。

open() - 打开新窗口

javascript

// 基本用法
window.open("https://example.com");

// 在新标签页打开（现代浏览器的默认行为）
window.open("https://example.com", "_blank");

// 在当前窗口打开
window.open("https://example.com", "_self");

// 打开新窗口并指定尺寸（可能被浏览器阻止）
const newWindow = window.open(
  "https://example.com",
  "myWindow",
  "width=800,height=600,left=100,top=100"
);

// 检查窗口是否成功打开（可能被弹窗拦截器阻止）
if (newWindow) {
  console.log("窗口已打开");

  // 可以控制新窗口
  newWindow.focus(); // 使新窗口获得焦点

  // 5秒后关闭窗口
  setTimeout(() => {
    newWindow.close();
  }, 5000);
} else {
  console.log("窗口被阻止，可能被弹窗拦截器拦截");
  alert("请允许弹出窗口以继续");
}

window.open() 的常用参数：

javascript

const features = [
  "width=800", // 窗口宽度
  "height=600", // 窗口高度
  "left=100", // 窗口左边距
  "top=100", // 窗口上边距
  "menubar=no", // 不显示菜单栏
  "toolbar=no", // 不显示工具栏
  "location=no", // 不显示地址栏
  "status=no", // 不显示状态栏
  "resizable=yes", // 允许调整大小
  "scrollbars=yes", // 显示滚动条
].join(",");

const popup = window.open("page.html", "popup", features);

实际应用：智能弹窗管理器

javascript

class PopupManager {
  static openCenteredWindow(url, width = 800, height = 600, title = "popup") {
    // 计算居中位置
    const left = (screen.width - width) / 2;
    const top = (screen.height - height) / 2;

    const features = `
      width=${width},
      height=${height},
      left=${left},
      top=${top},
      menubar=no,
      toolbar=no,
      location=no,
      status=no,
      resizable=yes,
      scrollbars=yes
    `.replace(/\s/g, "");

    const popup = window.open(url, title, features);

    if (!popup) {
      console.error("弹窗被阻止");
      alert("请允许弹出窗口以查看内容");
      return null;
    }

    // 使弹窗获得焦点
    popup.focus();

    return popup;
  }

  static openShareWindow(platform, url) {
    const shareUrls = {
      twitter: `https://twitter.com/intent/tweet?url=${encodeURIComponent(
        url
      )}`,
      facebook: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
        url
      )}`,
      linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(
        url
      )}`,
    };

    const shareUrl = shareUrls[platform];

    if (!shareUrl) {
      console.error(`不支持的平台: ${platform}`);
      return null;
    }

    return this.openCenteredWindow(shareUrl, 600, 400, `share_${platform}`);
  }

  static openPrintWindow(content) {
    const printWindow = window.open("", "print", "width=800,height=600");

    if (!printWindow) {
      console.error("无法打开打印窗口");
      return;
    }

    printWindow.document.write(`
      <!DOCTYPE html>
      <html>
        <head>
          <title>打印</title>
          <style>
            body { font-family: Arial, sans-serif; padding: 20px; }
            @media print {
              button { display: none; }
            }
          </style>
        </head>
        <body>
          ${content}
          <br><br>
          <button onclick="window.print()">打印此页</button>
          <button onclick="window.close()">关闭</button>
        </body>
      </html>
    `);

    printWindow.document.close();
  }
}

// 使用示例

// 打开居中窗口
const popup = PopupManager.openCenteredWindow("https://example.com");

// 分享到社交媒体
document.getElementById("shareTwitter")?.addEventListener("click", () => {
  PopupManager.openShareWindow("twitter", window.location.href);
});

// 打开打印窗口
document.getElementById("printBtn")?.addEventListener("click", () => {
  const content = document.getElementById("content").innerHTML;
  PopupManager.openPrintWindow(content);
});

close() - 关闭窗口

javascript

// 关闭当前窗口（只能关闭通过 window.open() 打开的窗口）
window.close();

// 实际应用：关闭弹出窗口
function openTempWindow() {
  const tempWindow = window.open("page.html", "temp", "width=400,height=300");

  // 10秒后自动关闭
  setTimeout(() => {
    if (tempWindow && !tempWindow.closed) {
      tempWindow.close();
      console.log("临时窗口已关闭");
    }
  }, 10000);
}

focus() 和 blur() - 焦点控制

javascript

// 使窗口获得焦点
window.focus();

// 使窗口失去焦点
window.blur();

// 实际应用：弹窗焦点管理
function openFocusedPopup(url) {
  const popup = window.open(url, "focused", "width=600,height=400");

  if (popup) {
    // 确保弹窗获得焦点
    popup.focus();

    // 监听主窗口焦点变化
    window.addEventListener("focus", () => {
      console.log("主窗口获得焦点");
    });

    window.addEventListener("blur", () => {
      console.log("主窗口失去焦点");
    });
  }
}

滚动控制方法

window 对象提供了多个方法来控制页面滚动。

scrollTo() - 滚动到指定位置

javascript

// 滚动到页面顶部
window.scrollTo(0, 0);

// 滚动到指定坐标
window.scrollTo(0, 500); // 滚动到垂直位置 500px

// 使用对象参数（支持平滑滚动）
window.scrollTo({
  top: 500,
  left: 0,
  behavior: "smooth", // 平滑滚动
});

// 实际应用：返回顶部按钮
function createBackToTopButton() {
  const button = document.createElement("button");
  button.textContent = "返回顶部";
  button.className = "back-to-top";
  button.style.cssText = `
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    padding: 10px 20px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  `;

  document.body.appendChild(button);

  // 滚动时显示/隐藏按钮
  window.addEventListener("scroll", () => {
    if (window.pageYOffset > 300) {
      button.style.display = "block";
    } else {
      button.style.display = "none";
    }
  });

  // 点击返回顶部
  button.addEventListener("click", () => {
    window.scrollTo({
      top: 0,
      behavior: "smooth",
    });
  });
}

scrollBy() - 相对滚动

javascript

// 向下滚动 100px
window.scrollBy(0, 100);

// 向上滚动 100px
window.scrollBy(0, -100);

// 平滑滚动
window.scrollBy({
  top: 100,
  behavior: "smooth",
});

// 实际应用：翻页滚动
function scrollByPage(direction) {
  const pageHeight = window.innerHeight;

  window.scrollBy({
    top: direction === "down" ? pageHeight : -pageHeight,
    behavior: "smooth",
  });
}

// 绑定键盘事件
document.addEventListener("keydown", (event) => {
  if (event.key === "PageDown") {
    event.preventDefault();
    scrollByPage("down");
  } else if (event.key === "PageUp") {
    event.preventDefault();
    scrollByPage("up");
  }
});

实际应用：滚动到元素

javascript

class ScrollManager {
  // 滚动到指定元素
  static scrollToElement(elementOrSelector, options = {}) {
    const element =
      typeof elementOrSelector === "string"
        ? document.querySelector(elementOrSelector)
        : elementOrSelector;

    if (!element) {
      console.error("元素未找到");
      return;
    }

    const defaultOptions = {
      behavior: "smooth",
      block: "start", // 元素顶部对齐视口顶部
      inline: "nearest",
      offset: 0, // 额外的偏移量
    };

    const finalOptions = { ...defaultOptions, ...options };
    const offset = finalOptions.offset;
    delete finalOptions.offset;

    if (offset) {
      // 如果有偏移量，需要手动计算
      const elementTop =
        element.getBoundingClientRect().top + window.pageYOffset;
      window.scrollTo({
        top: elementTop - offset,
        behavior: finalOptions.behavior,
      });
    } else {
      // 直接使用原生 scrollIntoView
      element.scrollIntoView(finalOptions);
    }
  }

  // 检查元素是否在视口中
  static isElementInViewport(elementOrSelector) {
    const element =
      typeof elementOrSelector === "string"
        ? document.querySelector(elementOrSelector)
        : elementOrSelector;

    if (!element) return false;

    const rect = element.getBoundingClientRect();

    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= window.innerHeight &&
      rect.right <= window.innerWidth
    );
  }

  // 获取滚动进度（百分比）
  static getScrollProgress() {
    const windowHeight = window.innerHeight;
    const documentHeight = document.documentElement.scrollHeight;
    const scrollTop = window.pageYOffset;

    const maxScroll = documentHeight - windowHeight;
    const progress = (scrollTop / maxScroll) * 100;

    return Math.min(100, Math.max(0, progress));
  }

  // 创建滚动进度条
  static createScrollProgressBar() {
    const progressBar = document.createElement("div");
    progressBar.style.cssText = `
      position: fixed;
      top: 0;
      left: 0;
      width: 0%;
      height: 3px;
      background: linear-gradient(to right, #007bff, #00d4ff);
      z-index: 9999;
      transition: width 0.1s ease;
    `;

    document.body.appendChild(progressBar);

    window.addEventListener("scroll", () => {
      const progress = this.getScrollProgress();
      progressBar.style.width = `${progress}%`;
    });
  }
}

// 使用示例

// 滚动到特定元素
ScrollManager.scrollToElement("#section-2", {
  behavior: "smooth",
  block: "center",
  offset: 80, // 距离顶部 80px（用于固定导航栏）
});

// 检查元素是否可见
if (ScrollManager.isElementInViewport("#target")) {
  console.log("元素在视口中");
}

// 获取滚动进度
console.log("页面滚动进度:", ScrollManager.getScrollProgress() + "%");

// 创建滚动进度条
ScrollManager.createScrollProgressBar();

定时器方法

虽然定时器方法是 window 对象的一部分，但它们非常重要，值得详细讨论。

setTimeout() - 延迟执行

javascript

// 基本用法
setTimeout(() => {
  console.log("1 秒后执行");
}, 1000);

// 带参数
setTimeout(
  (name, age) => {
    console.log(`${name} 的年龄是 ${age}`);
  },
  1000,
  "Alice",
  25
);

// 返回定时器 ID
const timerId = setTimeout(() => {
  console.log("这可能不会执行");
}, 5000);

// 取消定时器
clearTimeout(timerId);

setInterval() - 重复执行

javascript

// 基本用法
const intervalId = setInterval(() => {
  console.log("每秒执行一次");
}, 1000);

// 5秒后停止
setTimeout(() => {
  clearInterval(intervalId);
  console.log("定时器已停止");
}, 5000);

// 实际应用：倒计时
function countdown(seconds, callback) {
  let remaining = seconds;

  const intervalId = setInterval(() => {
    console.log(`剩余 ${remaining} 秒`);
    remaining--;

    if (remaining < 0) {
      clearInterval(intervalId);
      console.log("倒计时结束！");
      callback?.();
    }
  }, 1000);

  return intervalId;
}

// 使用
countdown(5, () => {
  console.log("时间到！");
});

实际应用：定时器工具类

javascript

class TimerManager {
  static delay(ms) {
    return new Promise((resolve) => setTimeout(resolve, ms));
  }

  static debounce(func, delay) {
    let timeoutId;

    return function (...args) {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => func.apply(this, args), delay);
    };
  }

  static throttle(func, limit) {
    let inThrottle;

    return function (...args) {
      if (!inThrottle) {
        func.apply(this, args);
        inThrottle = true;
        setTimeout(() => (inThrottle = false), limit);
      }
    };
  }

  static createTimer(duration, onTick, onComplete) {
    let remaining = duration;
    const startTime = Date.now();

    const intervalId = setInterval(() => {
      const elapsed = Date.now() - startTime;
      remaining = Math.max(0, duration - elapsed);

      onTick?.(remaining);

      if (remaining === 0) {
        clearInterval(intervalId);
        onComplete?.();
      }
    }, 100); // 每100ms更新一次

    return () => clearInterval(intervalId);
  }
}

// 使用示例

// 延迟执行
async function loadData() {
  console.log("开始加载...");
  await TimerManager.delay(2000);
  console.log("加载完成！");
}

// 防抖搜索
const debouncedSearch = TimerManager.debounce((query) => {
  console.log("搜索:", query);
}, 300);

document.getElementById("searchInput")?.addEventListener("input", (e) => {
  debouncedSearch(e.target.value);
});

// 节流滚动
const throttledScroll = TimerManager.throttle(() => {
  console.log("滚动位置:", window.pageYOffset);
}, 200);

window.addEventListener("scroll", throttledScroll);

// 精确计时器
const stopTimer = TimerManager.createTimer(
  10000, // 10秒
  (remaining) => {
    console.log(`剩余: ${(remaining / 1000).toFixed(1)} 秒`);
  },
  () => {
    console.log("计时结束！");
  }
);

小结

window 对象是 JavaScript 与浏览器环境交互的核心接口。通过它，我们可以：

窗口信息与控制：

获取窗口尺寸和位置（innerWidth, innerHeight, screenX, screenY）
打开和关闭窗口（open(), close()）
管理窗口焦点（focus(), blur()）

用户交互：

显示提示框（alert(), confirm(), prompt()）
控制页面滚动（scrollTo(), scrollBy()）

定时器管理：

延迟执行（setTimeout()）
重复执行（setInterval()）

最佳实践：

使用防抖和节流优化性能
优先使用自定义模态框替代原生提示框
注意浏览器弹窗拦截器
清理不再使用的定时器
使用现代 API（如 scrollIntoView()）简化滚动操作

Window 对象：浏览器窗口的全能控制中心 ​

Window 对象的双重身份 ​

全局对象的角色 ​

浏览器窗口的角色 ​

窗口尺寸与位置 ​

窗口尺寸属性 ​

实际应用：响应式尺寸检测 ​

窗口位置属性 ​

用户交互方法 ​

alert() - 警告对话框 ​

confirm() - 确认对话框 ​

prompt() - 输入对话框 ​

现代替代方案 ​

窗口控制方法 ​

open() - 打开新窗口 ​

实际应用：智能弹窗管理器 ​

close() - 关闭窗口 ​

focus() 和 blur() - 焦点控制 ​

滚动控制方法 ​

scrollTo() - 滚动到指定位置 ​

scrollBy() - 相对滚动 ​

实际应用：滚动到元素 ​

定时器方法 ​

setTimeout() - 延迟执行 ​

setInterval() - 重复执行 ​

实际应用：定时器工具类 ​

小结 ​

Window 对象：浏览器窗口的全能控制中心

Window 对象的双重身份

全局对象的角色

浏览器窗口的角色

窗口尺寸与位置

窗口尺寸属性

实际应用：响应式尺寸检测

窗口位置属性

用户交互方法

alert() - 警告对话框

confirm() - 确认对话框

prompt() - 输入对话框

现代替代方案

窗口控制方法

open() - 打开新窗口

实际应用：智能弹窗管理器

close() - 关闭窗口

focus() 和 blur() - 焦点控制

滚动控制方法

scrollTo() - 滚动到指定位置

scrollBy() - 相对滚动

实际应用：滚动到元素

定时器方法

setTimeout() - 延迟执行

setInterval() - 重复执行

实际应用：定时器工具类

小结