前端開發(fā)人員對?window.location對象應(yīng)該不陌生，通過它不但可以獲取當(dāng)前頁面的地址信息瘟檩，還可以修改某些屬性抹缕，實現(xiàn)頁面跳轉(zhuǎn)和刷新等。
我們以一個常見的 URL 為例墨辛，看看window.location包含哪些屬性和方法卓研。
window.location.href → 'http://www.reibang.com/search?q=JS#comments'
? ? ? ? ? ? ? .origin? → 'http://www.reibang.com'
? ? ? ? ? ? ? .protocol → 'https:'
? ? ? ? ? ? ? .host? ? → 'www.reibang.com'
? ? ? ? ? ? ? .hostname → 'www.reibang.com'
? ? ? ? ? ? ? .port? ? → ''
? ? ? ? ? ? ? .pathname → '/search/'
? ? ? ? ? ? ? .search? → '?q=JS'
? ? ? ? ? ? ? .hash? ? → '#comments'
window.location.assign('url')
? ? ? ? ? ? ? .replace('url')
? ? ? ? ? ? ? .reload()
? ? ? ? ? ? ? .toString()
如何訪問 Location 對象
window.location返回?Location?類型的一個實例對象，包含當(dāng)前頁面的地址信息睹簇∽嘧福可以通過以下幾種方式訪問：
window.location? ? ? ? ? → Location
window.document.location → Location
document.location? ? ? ? → Location
location? ? ? ? ? ? ? ? → Location
這幾個變量都是等價的，因為它是全局變量太惠。但是建議避免直接用location變量磨淌，因為很容易跟其他局部變量混淆，造成不必要的麻煩垛叨。比如：
location.protocol; // 'https'
function localFile() {
? const location = '/vue';
? return location.protocol;
? // ? undefined
? //? ? 這里的局部變量 "location"覆蓋了全局變量
}
推薦用window.location伦糯，這樣一眼就可以看出用的是全局變量。
window.location 方法一覽表
window.location動作
.assign()導(dǎo)航到指定 URL.replace()導(dǎo)航到指定 URL并刪除當(dāng)前頁面的訪問記錄.reload()重新加載當(dāng)前頁面.toString()返回 URL 字符串
.toString()和.href都是返回 URL嗽元，它們之間有區(qū)別嗎？結(jié)果是一樣的喂击，性能上稍微有點(diǎn)差別剂癌。通過 JSPerf 上的性能測試結(jié)果可以看出，.href稍快翰绊，通過window.location拼接字符串的形式速度最慢佩谷。
.assign()?和直接修改href是等價的，那么它們跟.replace()的區(qū)別是什么呢监嗜？
.assign()?在跳轉(zhuǎn)新地址的同時會留下當(dāng)前頁面的訪問記錄谐檀，點(diǎn)擊瀏覽器返回按鈕會回到原來的頁面，.replace()則不會保留裁奇。
.assign()執(zhí)行流程：
1. 打開空白頁
2. 訪問 www.kaysonli.com (當(dāng)前頁)
3. 加載新頁面? `window.location.assign('https://www.w3schools.com')`
4. 點(diǎn)擊瀏覽器返回按鈕
5. 回到? www.kaysonil.com
.replace()執(zhí)行流程：
1. 打開空白頁
2. Go to www.kaysonli.com (當(dāng)前頁)
3. 加載新頁面? `window.location.assign('https://www.w3schools.com')`
4. 點(diǎn)擊瀏覽器返回按鈕
5. 回到? 空白頁
這個特性在用 JS 控制頁面導(dǎo)航時非常重要桐猬，稍不注意會造成意外的的頁面回退地址。.
