location.href 属性与 location.assign(） 方法

这很旧，但是当我在寻找一种方法来检查我的单元测试是否重定向到正确的URL时，我偶然发现了这个。

如果您更关心测试，我会选择window.location.assign()。使用函数允许您模拟所述函数并检查 url 输入参数。

所以，开玩笑：

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

我个人更喜欢调用函数，因为调用函数给我一个更好的印象，即某些东西正在运行，而不仅仅是正在更改的变量的值。

但可能是的，根据我的测试，location.href = url;可能确实比 location.assign(url) 更快，尽管它可能取决于 JavaScript 引擎的实现。[删除了测试的死链接。

我一直使用并且从未遇到过以下问题：

location.href = url;

调用函数应该比访问属性稍慢，但就内存而言，我的拙见应该没有太大区别。

在使用location.href = url而不是location.assign（url）之间，JavaScript内存消耗有什么特别的优点/缺点吗？

不

完全没有区别。

原因很简单。每次浏览器加载新页面时，它都会启动一个新的 Javascript "VM"，其中包含在该 VM 中运行的该页面的脚本。运行问题中的任何一个语句时，您正在指示浏览器加载新页面，这意味着销毁当前 VM（并释放与之关联的任何内存）并为新页面加载全新的 VM。

除了任何奇怪的浏览器错误，净效果总是相同的。脚本在具有完全相同的内存消耗的全新 VM 中运行。

移位

如果您在浏览器中使用位置对象，并且希望能够在 Node JS 上运行此代码（例如用于测试或等轴测代码），则可以使用 ulocation ，这是 Location 对象的通用/等轴测实现。完全披露：我是该软件包的作者。

区别

1. location.href 是一个属性，这意味着它比调用函数更快，但最重要的是 href 属性使用户能够在单击浏览器上的后退按钮时
返回
2. location.replace（） 用户将无法返回到当前页面。
3. location.assign（） 用户将能够通过像 href 这样的后退按钮返回，但 Location.assign 在测试和模拟方面更好

在 Windows Server 2008 R2/7 64 位上为 Chrome 40.0.2214.93 32 位测试了我的机器/浏览器 http://jsperf.com/location-href-vs-location-assign/2

location.assign 比 location.href 慢 15%。

我想添加一个我在 React 中工作时使用两者时遇到的差异，上述答案缺少。

在 React 中分析以下代码片段：

return (<>location.href = "www://example.com"</>)

与

return (<>location.assign("www://example.com")</>)

在 fonmer 的情况下，您实际上会看到字符串 www://example.com 在 DOM 上键入了一瞬间，因为它在此重定向发生之前呈现文本。

为了避免这种情况，我们需要使用后一种location.assign()