JavaScript中window.location与window.Location的区别及用法

JavaScript 对大小写敏感，这俩命名看着相似，本质完全是两个独立的全局成员：

window.location（小写l开头） #

这是前端日常开发最常用的BOM对象之一：

• 类型是Location接口的实例对象
• 存储了当前页面的完整URL信息，拆分出了protocol、host、pathname、search、hash等可读写的URL片段属性，同时挂载了assign()、replace()、reload()等方法，用来实现页面跳转、刷新、URL参数读取等常规操作。
• 日常用法示例：

// 跳转到指定地址
window.location.href = '/dashboard';
// 读取当前URL的查询参数
const searchParams = new URLSearchParams(window.location.search);
// 强制从服务端刷新当前页面
window.location.reload(true);

浏览器全局环境下直接写location不加window.前缀，默认指向的就是window.location。

window.Location（大写L开头） #

这是很多开发者容易忽略的全局成员：

• 类型是构造函数，也就是问题里提到的函数类型
• 本质是window.location实例对应的构造接口，判断window.location instanceof window.Location会返回true，和Array是数组实例的构造器、Date是日期实例的构造器逻辑完全一致。
• 实际使用场景非常少，主要集中在两个方向：
  • 类型判断：当你拿到一个未知来源的对象，需要校验它是不是Location实例时，可以用xxx instanceof Location做类型校验
  • 特性检测：做兼容性polyfill的时候，可以通过Location.prototype判断当前浏览器的Location实例是否支持特定属性或方法，比如检测是否存在ancestorOrigins属性来判断跨域上下文能力
• 注意：你不能直接通过new Location()创建自定义的Location实例，浏览器环境下直接调用这个构造函数会抛出类型错误，它本身是Web标准定义的宿主接口，不对外暴露公开的实例化能力。
• 绝大多数开发者碰到这个构造函数的场景，其实是手滑写错了大小写：本来想操作window.location做跳转，结果把首字母l大写写成了window.Location，拿到构造函数之后赋值既不生效也不跳转，排查很久才发现是大小写笔误。

内容的提问来源于stack exchange，提问作者Am1n