本文详细解析JavaScript中window.location对象的8个核心属性（protocol、hostname、port等）及其读写特性，重点说明href与hash修改的实际效果。同时对比分析location.assign、replace和reload三种导航方法在浏览器历史记录栈中的行为差异，帮助开发者精准控制页面跳转与刷新逻辑。
window.location对象概述
在实际开发中，开发者经常需要操作window.location对象，但其内部结构往往容易混淆。为了便于日后查阅与快速掌握，这里对window.location的核心结构与用法进行系统性梳理。
URL结构解析与属性详解
以下示例展示了一个标准的URL结构：http://b.a.com:88/index.php?name=kang&when=2011#first。该URL包含了协议、主机名、端口、路径、查询参数及哈希值等关键组成部分。
| 属性 | 含义 | 值 |
|---|---|---|
| protocol: | 协议 | "http:" |
| hostname: | 服务器的名字 | "b.a.com" |
| port: | 端口 | "88" |
| pathname: | URL中主机名后的部分 | "/index.php" |
| search: | "?"后的部分，又称为查询字符串 | "?name=kang&when=2011" |
| hash: | 返回"#"之后的内容 | "#first" |
| host: | 等于hostname + port | "b.a.com:88" |
| href: | 当前页面的完整URL | "http://www.a.com:88/index.php?name=kang&when=2011#first" |
在JavaScript中，window.location与document.location指向同一个对象，两者完全等价，开发者可以根据习惯在代码中互换使用，无需担心功能差异。
location对象包含8个属性，这些属性均支持读写操作。然而，从实际功能角度看，只有修改href和hash属性具有显著意义。例如，赋值给location.href会触发页面重定向至新URL；而修改location.hash则会在当前页面内跳转至指定的锚点（如<a id="name">或<div id="id">等元素），此过程不会导致页面重新加载，用户体验更为流畅。
需要注意的是，当URL中包含多个特殊字符时，属性的解析结果可能出乎意料。例如在URL：http://b.a.com:88/index.php?name=kang&how=#when=2011#first中，search和hash的取值逻辑需仔细辨析。
| search: | "?name=kang&how=" | 第一个"?"之后 |
| hash: | "#when=2011#first" | 第一个"#"之后的内容 |
在上述示例中，search属性的值为"?name=kang&how="，它截取的是第一个问号"?"之后的所有内容。
同时，hash属性的值为"#when=2011#first"，它截取的是第一个井号"#"之后的所有剩余内容，包括后续可能出现的其他哈希符号。
页面导航方法对比
除了属性访问，location对象还提供了几个关键的方法用于控制页面导航行为。
location.assign( url )：该方法用于加载新页面，例如location.assign('http://www.baidu.com')的效果等同于直接赋值window.location = 'http://www.baidu.com'。其特点是会将新地址推入浏览器历史记录栈，因此用户点击“后退”按钮可以返回到之前的页面。location.replace( url )：与assign类似，用于跳转新页面，但关键区别在于它不会在历史记录栈中保留当前页面，而是直接替换当前记录。这意味着跳转后“后退”按钮无法返回原页面。需要注意的是，IE和Chrome浏览器目前仅执行简单跳转，不删除历史记录，而Firefox浏览器会正确删除当前页面的历史记录。location.reload( force )：用于重新加载当前页面。参数force为布尔值，当设为true时强制从服务器端重新获取页面；若为false（默认值），则从浏览器缓存中重载页面。