增强pushState与replaceState

这段代码什么意思？（摘自一篇single-spa文章）

js 复制代码

window.history.pushState = patchedUpdateState(window.history.pushState)
window.history.replaceState = patchedUpdateState(window.history.replaceState)

function patchedUpdateState(updateState) {
    return function (...args) {
        const urlBefore = window.location.href;
        const result = Reflect.apply(updateState, this, args)
        const urlAfter = window.location.href
        if (urlBefore !== urlAfter) {
            doSomething()
        }
        return result
    }
}

先整体来看，就是将window.history里的pushState或者replaceState方法作为参数updateState传入定义的patchedUpdateState方法，当调用patchedUpdateState方法时，返回了一个匿名函数，保存在了对应的位置。

再拆开来看：

1.pushState与replaceState,

以pushState为例，先看下它的函数签名pushState(state, unused, url)

参数state，该参数将会被存储在history的state属性上，要求是个16M大小以内的object即可。参数unused,默认传空字符串即可。

参数url，该url要求与当前url同源，调用pushState后浏览器并不会加载此url，但是url地址栏会改变。

它俩最大的区别是，pushState 会在浏览器历史记录中创建一个新的一条，而 replaceState 只会替换当前状态，这样做的副作用是，使用 replaceState 方法将更改地址栏中的 URL，而不会创建新的历史记录条目。

说人话：就是如果你调用了N次pushState，当你点击浏览器返回按钮至最初的页面时，你同样需要点击N次，而replaceState只需要点击1次。

2.上面清楚了，ok，我想你应该又遇到了Reflect.apply，这是反射提供的静态方法，可以直接调用，和Function.prototype.apply()的使用略有不同，但是作用相同，意思是调用updateState方法，修改this指向（留个小疑问，这里的this指向是谁，知道的小伙伴可以敲在评论区），传入args参数。

至此，我想聪明的你已经清楚，通过反射的apply调用pushState或者replaceState方法，比较前后url，如果不同则去处理一些事情。最终将pushState或者replaceState方法的返回值return出去。

总结

虽然代码量并不多，但是完全弄清楚这段代码什么意思，你要了解内部一些API的作用是什么，参数是什么，返回是什么，使用场景是什么，甚至对比es6之前的方法有什么不同，延伸再延伸，这里只是抛砖引玉，你get了吗。