紅寶書第二十四講：詳解BOM對象：window、location、history
資料取自《JavaScript高級程序設(shè)計(jì)（第5版）》。
查看總目錄：紅寶書學(xué)習(xí)大綱
一、BOM核心：window對象
window對象是瀏覽器窗口的入口，同時(shí)扮演 全局作用域角色（所有全局變量/函數(shù)都掛載在window上）[1]。
// 全局變量實(shí)際是window的屬性
var name = "小明";
console.log(window.name); // 輸出"小明"
// 全局函數(shù)即window的方法
function hello() {
console.log("你好！");
}
window.hello(); // 調(diào)用方法
flowchart TB
window[Window對象] -->|包含| document(Document)
window -->|包含| location(Location)
window -->|包含| history(History)
window -->|包含| navigator(Navigator)
?? 不要濫用全局：過多全局變量會影響性能。
二、location對象：地址欄控制器
location存儲當(dāng)前頁面的 地址信息，并允許 跳轉(zhuǎn)頁面[2][3]。
關(guān)鍵屬性與方法
| 屬性/方法 | 說明 | 示例 |
|---|---|---|
location.href |
完整URL | https://example.com:8080/path?q=test |
location.host |
主機(jī)+端口（example.com:8080） |
|
location.pathname |
路徑（/path） |
|
location.search |
查詢參數(shù)（?q=test） |
|
location.reload() |
刷新頁面 |
location.reload(true)（強(qiáng)制刷新） |
location.replace() |
無痕跳轉(zhuǎn)（不在歷史記錄中留下痕跡） | location.replace('https://new.url') |
示例1：解析當(dāng)前URL
console.log('協(xié)議:', location.protocol); // 'https:'
console.log('域名:', location.hostname); // 'example.com'
console.log('路徑:', location.pathname); // '/search'
示例2：頁面跳轉(zhuǎn)的兩種方式
// 方式1：記錄到歷史（可后退）
window.location.;
// 方式2：無痕跳轉(zhuǎn)（不能后退）
location.replace('https://new.url');
三、history對象：歷史記錄管理
history提供 前進(jìn)/后退 控制能力，但出于安全考慮限制較多[^2][3]。
核心方法
| 方法 | 作用 | 等效操作 |
|---|---|---|
history.back() |
后退一頁 | ← 按鈕 |
history.forward() |
前進(jìn)一頁 | → 按鈕 |
history.go(n) |
跳轉(zhuǎn)n頁 |
go(-1)即后退 |
示例3：自定義“返回”按鈕
<button onclick="history.back()">返回</button>
示例4：添加歷史記錄（HTML5 API）
// 添加一條歷史記錄（不刷新頁面）
history.pushState({ user: '小明' }, '標(biāo)題', '/user=小明');
目錄：總目錄
上篇文章：紅寶書第二十三講：詳解DOM事件模型：冒泡與事件委托
腳注
-
《JavaScript高級程序設(shè)計(jì)（第5版）》解釋window對象作為全局作用域的特性 ?
-
《JavaScript高級程序設(shè)計(jì)（第5版）》指出location對象用于操作瀏覽器導(dǎo)航 ?
-
《JavaScript高級程序設(shè)計(jì)（第5版）》總結(jié)location.replace()不保留歷史記錄 ? ?
