详解JS中的window.location对象（备忘单）(2)-木庄网络博客

window.location vs location

上面四个属性都指向同一个Location对象。我个人更喜欢window.location并且实际上会避免使用location。主要是因为location看起来像一个普通变量，并且我们有时可能会不小心将其命名为变量，这将覆盖全局变量。举个例子：

// https://www.samanthaming.com
 
location.protocol; // 'https'
 
function localFile() {
  const location = '/sam';
 
  return location.protocol;
  //  undefined
  //    b/c local "location" has override the global variable
}

我想大多数开发人员都知道window是一个全局变量。这样就不太可能引起混淆。老实说，直到我写了这篇文章，我才知道location 是一个全局变量。建议大家多使用 window.location 来代替其它写法。

window.location 方法

方法	作用
.assign()	加载一个新的文档
.replace()	用新的文档替换当前文档
.reload()	重新加载当前页面
.reload()	返回的URL

window.location.toString

根据 MDN :

此方法返回 URL 的 USVString，它是 Location.href 的只读版本。

换句话说，我们可以这样得到 href 的值：

// https://www.samanthaming.com
 
window.location.href; // https://www.samanthaming.com
window.location.toString(); // https://www.samanthaming.com

assign vs replace

这两种方法都是重定向或导航到另一个URL。区别在于assign 是将当前页面保存在历史记录中，因此用户可以使用“后退”按钮导航到该页面。而使用replace方法时，不会保存它。让我们来看一个例子。

Assign

打开一个新的空白页
输入 www.samanthaming.com (当前页)
 
使用 `window.location.assign('https://www.w3schools.com')` 载入新页面
按 "返回上一页"
返回到了 ???? www.samanthaming.com

Replace

打开一个新的空白页
输入 www.samanthaming.com (当前页)
 
使用 `window.location.assign('https://www.w3schools.com')` 载入新页面
按 "返回上一页"
返回到一个空白页

如何让页面重定向

如何重定向到另一个页面，有3种方法。

window.location.href = 'https://www.samanthaming.com';
 
window.location.assign('https://www.samanthaming.com');
 
window.location.replace('https://www.samanthaming.com');

replace vs assign vs href

这三个都可以重定向，区别在于浏览器的历史记录。href和assign 会把当前页面保存在历史记录中，而replace则不会。因此，如果你想创建一种导航无法回到原始页面的体验，请使用replace????

现在的问题是href与assign。我更喜欢assign，因为它是一种方法，因此感觉好像我正在执行一些操作。还有一个额外的好处是它更易于测试。我已经编写了许多Jest测试，因此通过使用一种方法，它使其更易于模拟。

window.location.assign = jest.fn();
 
myUrlUpdateFunction();
 
expect(window.location.assign).toBeCalledWith('http://my.url');

最终希望备忘单，希望能对你有所帮助，在需要的时候，能快速给你带来答案。谢谢大家的观看。

英文原文地址：https://morioh.com/p/b444d291bdfb
作者：Samantha Ming
译者：前端小智

更多编程相关知识，请访问：编程入门！！

以上就是详解JS中的window.location对象（备忘单）的详细内容，更多文章请关注木庄网络博客！

返回前面的内容

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

详解JS中的window.location对象（备忘单）