前端必备基础知识：window.location 详解 _前端

文章插图

作者：大道至简
转发链接：
https://mp.weixin.qq.com/s/IeiVXX_HR7HKqww2r7rvMg
前言前端开发人员对 window.location对象应该不陌生，通过它不但可以获取当前页面的地址信息，还可以修改某些属性，实现页面跳转和刷新等。
我们以一个常见的 URL 为例，看看window.location包含哪些属性和方法。

window.location.href     → 'https://www.jianshu.com/search?q=JS#comments'               .origin   → 'https://www.jianshu.com'               .protocol → 'https:'               .host     → 'www.jianshu.com'               .hostname → 'www.jianshu.com'               .port     → ''               .pathname → '/search/'               .search   → '?q=JS'               .hash     → '#comments'

window.location.assign('url')               .replace('url')               .reload()               .toString()

window.location 属性一览表

文章插图

修改属性值以上属性除了origin是只读属性，其他都可以修改。修改后的效果就是跳转到相应的新地址。

window.location.protocol = 'https'               .host     = 'localhost:8080'               .hostname = 'localhost'               .port     = '8080'               .pathname = 'path'               .search   = 'q=vue' // (不需要带 ?)               .hash     = 'target' // (不需要带 #)               .href     = 'https://www.kaysonli.com'

如何访问 Location 对象window.location返回 Location 类型的一个实例对象，包含当前页面的地址信息。可以通过以下几种方式访问：

window.location          → Locationwindow.document.location → Locationdocument.location        → Locationlocation                 → Location

这几个变量都是等价的，因为它是全局变量。但是建议避免直接用location变量，因为很容易跟其他局部变量混淆，造成不必要的麻烦。比如：

location.protocol; // 'https'function localFile() {  const location = '/vue';  return location.protocol;  // ? undefined  //     这里的局部变量 "location"覆盖了全局变量}

推荐用window.location，这样一眼就可以看出用的是全局变量。
window.location 方法一览表