红宝书第二十四讲：详解BOM对象：window、location、history

---

红宝书第二十四讲：详解BOM对象：window、location、history

资料取自《JavaScript高级程序设计（第5版）》。
查看总目录：红宝书学习大纲

---

一、BOM核心：window对象

window对象是浏览器窗口的入口，同时扮演 全局作用域角色（所有全局变量/函数都挂载在window上）¹。

// 全局变量实际是window的属性
var name = "小明";
console.log(window.name); // 输出"小明"

// 全局函数即window的方法
function hello() {
  console.log("你好！");
}
window.hello(); // 调用方法

flowchart TB
  window[Window对象] -->|包含| document(Document)
  window -->|包含| location(Location)
  window -->|包含| history(History)
  window -->|包含| navigator(Navigator)

⚠️ 不要滥用全局：过多全局变量会影响性能。

---

二、location对象：地址栏控制器

location存储当前页面的 地址信息，并允许 跳转页面²³。

关键属性与方法

属性/方法	说明	示例
location.href	完整URL	https://example.com:8080/path?q=test
location.host	主机+端口（example.com:8080）
location.pathname	路径（/path）
location.search	查询参数（?q=test）
location.reload()	刷新页面	location.reload(true)（强制刷新）
location.replace()	无痕跳转（不在历史记录中留下痕迹）	location.replace('https://new.url')

示例1：解析当前URL

console.log('协议:', location.protocol); // 'https:'
console.log('域名:', location.hostname); // 'example.com'
console.log('路径:', location.pathname); // '/search'

示例2：页面跳转的两种方式

// 方式1：记录到历史（可后退）
window.location.href = 'https://new.url';

// 方式2：无痕跳转（不能后退）
location.replace('https://new.url');

---

三、history对象：历史记录管理

history提供 前进/后退 控制能力，但出于安全考虑限制较多²³。

核心方法

方法	作用	等效操作
history.back()	后退一页	← 按钮
history.forward()	前进一页	→ 按钮
history.go(n)	跳转n页	go(-1)即后退

示例3：自定义“返回”按钮

<button onclick="history.back()">返回</button>

示例4：添加历史记录（HTML5 API）

// 添加一条历史记录（不刷新页面）
history.pushState({ user: '小明' }, '标题', '/user=小明');

---

目录：总目录
上篇文章：红宝书第二十三讲：详解DOM事件模型：冒泡与事件委托

下篇文章：红宝书第二十五讲：客户端存储（Cookie、localStorage、IndexedDB）：浏览器里的“记忆盒子”

脚注

---

1. 《JavaScript高级程序设计（第5版）》解释window对象作为全局作用域的特性 ↩
2. 《JavaScript高级程序设计（第5版）》指出location对象用于操作浏览器导航 ↩
3. 《JavaScript高级程序设计（第5版）》总结location.replace()不保留历史记录 ↩