學習目標：
- 掌握Window對象
學習內容：
- BOM（瀏覽器對象模型）
- 定時器-延時函數
- JS執行機制
location對象navigation對象history對象
BOM（瀏覽器對象模型）：
- BOM是瀏覽器對象模型。
- window對象是一個全局對象，也可以說是JavaScript中的頂級對象。
- 像
document、alert()、console.log()這些都是window屬性，基本BOM的屬性和方法都是window的。 - 所有通過var定義在全局作用域中的變量、函數都會變成window對象的屬性和方法。
- window對象下的屬性和方法調用的時候可以省略window。
<title>BOM-瀏覽器對象模型</title>
</head><body><script>// document.querySelector()// window.document.querySelector()// window對象是一個全局對象// 像document 、alert()、console.log() 都是window屬性console.log(document === window.document) //truefunction fn() {console.log(11)}//所有通過var定義在全局作用域中的變量、函數都會變成window對象的屬性和方法window.fn()var num = 10console.log(window.num)</script></body>
定時器-延時函數：
JavaScript內置的一個用來讓代碼延遲執行的函數，叫setTimeout。
- 語法：
setTimeout(回調函數, 等待的毫秒數)
setTimeout僅僅只執行一次，所以可以理解為就是把一段代碼延遲執行，平時省略window。
- 清除延時函數：
let timer = setTimeout(回調函數, 等待的毫秒數)clearTimeout(timer)
-
注意點：
1.延時器需要等待，所以后面的代碼先執行。 2.每一次調用延時器都會產生一個新的延時器。 -
兩種定時器對比：執行的次數
| 延時函數 | 執行一次 |
|---|---|
| 間歇函數 | 每隔一段時間就執行一次，除非手動清除 |
- 練習
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>練習-5秒之后消失的廣告</title><style>img {position: fixed;left: 0;bottom: 0;}</style>
</head><body><img src="./images/ad.png" alt=""><script>//1.獲取元素const img = document.querySelector('img')setTimeout(function () {img.style.display = 'none'}, 5000)</script></body></html>
JS執行機制：
JavaScript語言的一大特點就是單線程，也就是說，同一個時間只能做一件事。
這是因為JavaScript這門腳本語言誕生的使命所致——JavaScript是為處理頁面中用戶的交互，以及操作DOM而誕生的。比如我們對某個DOM元素進行添加和刪除操作，不能同時進行。應該先行添加，之后再刪除。
單線程就意味著，所有任務需要排隊，前一個任務結束，才會執行后一個任務。這樣所導致的問題是：如果JS執行時間過長，這樣就會造成頁面的渲染不連貫，導致頁面渲染加載阻塞的感覺。
為了解決這個問題，利用多核CPU的計算能力，HTML5提出Web Worker標準，允許JavaScript腳本創建多個線程。于是，JS中出現了同步和異步。
- 同步
前一個任務結束后再執行后一個任務，程序的執行順序與任務的排列順序是一致的、同步的。
比如做飯的同步做法：我們要燒水煮飯，等水開了（10分鐘之后），再去切菜，炒菜。
- 異步
你在做一件事情時，因為這件事情會花費很長時間，在做這件事的同時，你還可以去處理其他事情。
比如做法的異步做法：我們在燒水的同時，利用這10分鐘，去切菜，燒菜。
他們的本質區別：這條流水線上各個流程的執行順序不同。
- 同步任務
同步任務都在主線程上執行，形成一個執行棧。
- 異步任務
JS的異步是通過回調函數實現的。
一般而言，異步任務有以下三種類型：
| 1.普通事件 | 如click、resize 等 |
|---|---|
| 2.資源加載 | 如load、error等 |
| 3.定時器 | 包括setInterval、setTimeout等 |
異步任務相關添加到 任務隊列中。（任務隊列也稱為消息隊列）
- 注意：
- 先執行
執行棧中的同步任務。 - 異步任務放入任務隊列中。
- 一旦執行棧中的所有同步任務執行完畢，系統就會按次序讀取
任務隊列中的異步任務，于是被讀取的異步任務結束等待狀態，進入執行棧，開始執行。
- 事件循環
由于主線程不斷地重復獲得任務、執行任務、再獲取任務、再執行，所以這種機制被稱為事件循環。
<title>事件循環</title>
</head><body><script>console.log(1)console.log(2)setTimeout(function () {console.log(3)}, 0)console.log(4);</script></body>
location對象：
location的數據類型是對象，它拆分并保存了UPL地址的各個組成部分。
- 常用屬性和方法
href屬性 | 獲取完整的URL地址，對其賦值時用于地址的跳轉 |
|---|---|
search屬性 | 獲取地址中攜帶的參數，符號？后面部分 |
hash屬性 | 獲取地址中的哈希值，符號#后面部分 |
reload方法 | 用來刷新當前頁面，傳入參數true時表示強制刷新 |
href屬性
獲取完整的URL地址，對其賦值時用于地址的跳轉。
// console.log(window.location)// console.log(location)//可以得到當前文件URL地址console.log(location.href)// 1. href 經常用href 利用js的方法去跳轉頁面location.href = 'http://www.baidu.com'
練習
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>練習-5秒之后跳轉的頁面</title><style>span {color: pink;}</style>
</head><body><a href="http://www.weibo.com">支付成功<span>5</span>秒鐘之后跳轉到首頁</a><script>//1.獲取元素const a = document.querySelector('a')//2.開啟定時器//3.聲明倒計時變量let num = 5let timerId = setInterval(function () {num--a.innerHTML = `支付成功<span>${num}</span>秒鐘之后跳轉到首頁`//如果num === 0 則停止定時器，并且完成跳轉功能if (num === 0) {clearInterval(timerId)//4.跳轉 location.hreflocation.href = 'http://www.weibo.com'}}, 1000)</script></body></html>
search屬性
獲取地址中攜帶的參數，符號？后面部分 。
console.log(location.search)
hash屬性
獲取地址中的哈希值，符號#后面部分。
console.log(location.hash)
后期vue路由的鋪墊，經常用于不刷新頁面，顯示不同頁面。
比如網易云音樂
reload方法
用來刷新當前頁面，傳入參數true時表示強制刷新。
<button class="reload">刷新</button><script>const reload = document.querySelector('.reload')reload.addEventListener('click', function () {// f5刷新頁面// location.reload()// 強制刷新 ctrl + f5location.reload(true)})</script>
navigation對象：
navigation的數據類型是對象，該對象下記錄了瀏覽器自身的相關信息。
- 常用屬性和方法
通過userAgent檢測瀏覽器的版本及平臺。
// 檢測 userAgent（瀏覽器信息）!(function () {const userAgent = navigator.userAgent// 驗證是否為Android或iPhoneconst android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)// 如果是Android或iPhone，則跳轉至移動站點if (android || iphone) {location.href = 'http://m.weibo.cn'}})();
<title>navigation對象-通過userAgent檢測瀏覽器版本及平臺</title><script>// 檢測 userAgent（瀏覽器信息）!(function () {const userAgent = navigator.userAgent// 驗證是否為Android或iPhoneconst android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)// 如果是Android或iPhone，則跳轉至移動站點if (android || iphone) {location.href = 'http://m.weibo.cn'}})();// !(function () { })();!function () { }()</script>
</head><body>這是pc端的頁面<script>// (function () { })()</script>
</body>
history對象：
history的數據類型是對象，主要管理歷史記錄，該對象與瀏覽器地址欄的操作相對應。
比如前進、后退、歷史記錄等。
- 常用屬性和方法
history對象方法 | 作用 |
|---|---|
back() | 可以后退功能 |
forward() | 前進功能 |
go(參數) | 前進后退功能，參數如果是1就前進1個頁面；如果是-1則后退1個頁面 |
<title>history對象</title>
</head><body><button>后退</button><button>前進</button><script>const back = document.querySelector('button:first-child')const forward = back.nextElementSiblingback.addEventListener('click', function () {//后退一步// history.back()history.go(-1)})forward.addEventListener('click', function () {//前進一步// history.forward()history.go(1)})</script></body>
history對象一般在實際開發中比較少用，但是會在一些OA辦公系統中見到。
類加載器)
