浏览器中的JavaScript核心BOM（浏览器对象模型）重点掌握对象之Location对象的属性与方法

引言

在学过JavaScript之后，我们都知道对象分为内置对象 、宿主对象 、自定义对象，我们经常用到的浏览器中的内置对象就是宿主对象的一种，浏览器的内置对象有很多，本文就来详细讲解一下Location对象的属性与方法吧。

• 公众号：前端印象
• 不定时有送书活动，记得关注~
• 关注后回复对应文字领取：【面试题】、【前端必看电子书】、【数据结构与算法完整代码】、【前端技术交流群】

正文

因为把浏览器的所有内置对象逐个详细讲解，文章篇幅会很长，所以我把每个对象的讲解都放在不同的文章中，大家如果还想了解其他的浏览器内置对象，可以划到文章最后一部分，那里有跳转链接。

一、Location对象的作用

Location对象包含着关于当前网页的URL信息，并且可以对URL进行拆分 、读写等各种操作。

二、Location对象的引用

我们可以通过浏览器的全局对象window来引用Location，像这样window.location ，也可以直接通过 location 来引用Locagtion对象。

window.location === location      //返回 true

我们在浏览器的控制台中引用一下Location对象，看看会返回什么

可以看到，返回的Location对象中有许多的属性和方法，接下来我们就对这些属性和方法进行讲解。

三、Location对象的属性

我们来看一下Location对象的属性，下面用一张表格来呈现：

属性	描述
href	设置或返回完整的URL
protocol	设置或返回URL的协议部分
host	设置或返回主机名和URL的端口号
hostname	设置或返回URL的主机名
pathname	设置或返回URL的路径
port	设置或返回URL的端口号
search	设置或返回URL的参数部分，即?后面的参数部分
hash	设置或返回URL的锚点部分，即#后面的锚点部分

接下来，看一下URL的格式是什么样的：协议://主机名:端口/路径?查询参数#锚

再来看看一个真实的URL
https://www.baidu.com/index.html?query=java&i=0#_1

我们在该URL页面调用Location对象的各个属性的返回值如下：

location.href   //返回https://www.baidu.com:5000/index.html?query=java&i=0#_1

location.protocol  //返回  https:

location.host      //返回  www.baidu.com:5000    

location.hostname  //返回  www.baidu.com

location.pathname  //返回  /index.html

location.port      //返回   5000

location.search    //返回  ?query=java&i=0

location.hash      //返回  #_1

这些属性是可读/写的，所以我们还可以通过给这些属性赋值，来改变当前页面的URL值，完成一些页面的跳转等操作，例如

//给当前页面的location对象的href属性赋值一个新的URL地址
location.href = "https://blog.youkuaiyun.com/L_PPP"

我们来看一下给href属性赋值后，会发生什么

可以看到，给href属性赋值后，当前页面的URL发生了改变，并发生了相应的页面跳转。同样的其他的属性也是可以进行赋值的，大家可以自行测试一下。

四、Location对象的方法

Location对象一共有3种方法，他们分别是：

方法	描述
assign()	加载一个新的页面
replace()	用新的页面替换当前页面
reload()	重新加载当前页面

我们来逐个讲解这三种看似作用相同，却有很大区别的方法吧。

• assign()

该方法需要传入一个URL作为参数，调用该方法后，页面会跳转到该URL所在的页面，并且我们可以通过浏览器的回退功能返回上一个页面。

//调用Location对象的assign()方法
location.assign("https://blog.youkuaiyun.com/L_PPP")

我们来看一下动图展示

• replace()

该方法同assign()方法一样，也需要传入一个URL作为参数，调用该方法后，页面会跳转到该URL所在的页面，但是不同的是，该方法调用进行跳转后无法通过浏览器的回退功能返回上一个页面了。

//调用Location对象的replace()方法
location.replace("https://blog.youkuaiyun.com/L_PPP")

我们来看一下动图展示

• reload()

该方法不需要传入任何的参数，可直接调用。调用该方法，会将当前页面重新加载，就相当于我们按了F5刷新页面。

//调用了location对象的reload()方法
location.reload()

我们来看一下动图展示

结束语

好了，Location对象的讲解就到这里了，如果各位对浏览器的其他内置对象感兴趣的话，可以去看我这篇文章——浏览器中的JavaScript核心讲解之BOM（浏览器对象模型），翻到最底部，可以看到各种其它浏览器内置对象的详解。