javascript - 历史推送状态不在独立的 location.hash 或 location.href 中，而是在 Location 对象本身中

Question

谁能解释一下这种行为？我使用 history.pushState(null, null, '#test'); 推送历史状态。然后，当尝试使用console.log(window.location.hash)在监听器函数中获取状态URL时(没有找到更好的方法来监听pushState更改)，它返回空字符串， #test 哈希。 console.log(window.location.href) 也返回不带哈希值的整个 URL #test 但 console.log(window.location) 返回 Location 对象，其中哈希值同时位于 href 和 hash 属性中。这是为什么？如何获取推送状态的 URL？

        (function(history){
            var pushState = history.pushState;
            history.pushState = function(state) {
                if (typeof history.onpushstate == "function") {
                    history.onpushstate({state: state});
                }
                console.log(window.location.hash);
                console.log(window.location.href);
                console.log(window.location);
                return pushState.apply(history, arguments);
            }
        })(window.history);

        history.pushState(null, null, '#test');

Answer 1

这是因为您在实际设置新状态之前记录了变量。您之所以可以在对象中看到更新的属性，是因为它记录了对该对象的引用，而不是记录该对象时的副本。在这一行之前，您的猴子补丁不会调用原始的 pushState 函数。

return pushState.apply(history, arguments);

要解决此问题，您可以在记录之前简单地调用该函数，然后返回响应。

(function(history){
    var pushState = history.pushState;
    history.pushState = function(state) {
        if (typeof history.onpushstate == "function") {
            history.onpushstate({state: state});
        }
        var r = pushState.apply(history, arguments);
        console.log(window.location.hash);
        console.log(window.location.href);
        console.log(window.location);
        return r;
    }
})(window.history);

history.pushState(null, null, '#test');