BOM知識點全面總結（附執行個體、圖解）

目錄

1. BOM概述

2. window對象的常見事件

   2.1 視窗加載事件

   2.2 調整視窗大小事件

3. 定時器

   3.1 兩種定時器

   3.2 setTimeout()定時器

   3.3 停止setTimeout()定時器

   3.4 setInerval()定時器

   3.5 停止setInerval(0定時器

   3.6 this

4. js執行機制

   4.1 js執行機制

   4.2 同步跟異步

   4.3 js執行機制

5. location對象

   5.1 什麼是location對象

   5.2 URL

   5.3 location對象的屬性

   5.4 location對象的方法

6. navigator
7. history對象

正文

1. BOM概述

BOM（Browser Object Model）即浏覽器對象模型。它提供了獨立于頁面而與浏覽器視窗進行互動的對象，其核心對象是window

BOM由一系列相關的對象構成，并且每個對象都提供了很多方法與屬性

BOM缺乏标準，JavaScript文法的标準化組織是ECMA，DOM标準化組織是W3C，BOM最初是Netscape浏覽器标準的一部分

BOM比DOM更大，它包含DOM

window對象是浏覽器的頂級對象，它具有雙重身份

• 它是js通路浏覽器視窗的一個接口
• 它是一個全局對象，定義在全局作用域中，函數都會變成window對象的屬性和方法

在調用的時候可以省略window，前面學習的對話框都屬于window對象方法，如alert();、prompt(0等。

注意：window下的一個特殊屬性window.name,聲明的時候不要用name，它是特殊屬性

2. window對象的常見事件

2.1 視窗加載事件

document.addEventListener(‘DOMContentLoaded’, function() {})

DOMContentLoaded觸發時u，僅當DOM加載完成，不包括樣式表、圖檔，flash等等（IE9以上才支援）

如果頁面很多圖檔的話，從使用者通路到onload觸發可能需要比較長的時間，互動效果就不能實作，必然影響使用者的體驗，此時用DOMContentLoaded比較合适

window.onload = function() {]

或者

window.addEventListener(“load”,function() {});

window.onload是視窗（頁面）加載事件，當文檔内容完全加載完成會觸發該事件（包括圖像、腳本檔案、css檔案等），就調用的處理函數

注意：

1. 有了window,onload就可以把js代碼寫到頁面元素的上方，因為onload是等頁面内容全部加載完畢，再去執行處理函數
2. window.onload傳統注冊事件方式隻能寫一次，如果有多個，會以最後一個為準
3. 如果使用addEventListener則沒有限制

window.addEventListener('load',function(){  
            alert('hi');
    })
    window.addEventListener('DOMContentLoaded',function(){  
            alert('hi');
    })
    // load 等頁面内容全部加載完畢，包括頁面DOM元素  圖檔 flash css等等
    // DOMContentLoaded 是DOM加載完畢， 不包括圖檔 flash css 等就可以執行 加載速度比load快一些
           

2.2 調整視窗大小事件

window.onresize = function() {}

window.addEventListener(“resize”,function() {});

window.onresize是調整視窗大小加載事件，當觸發時就調用的處理函數。

注意：

1. 隻要視窗大小發生像素變化，就會觸發這個事件。
2. 我們經常·利用這個事件完成響應式布局。window.innerWidth目前螢幕的寬度

響應式布局

var div = document.querySelector('div');
    window.addEventListener('resize',function(){
        if(window.innerWidth <= 800) {
            div.style.display = 'none';
        } else {
            div.style.display = 'block';
        }
    })
           

3. 定時器

3.1 兩種定時器

• setTimeout()
• setInterval()

3.2 setTimeout()定時器

window.setTimeout(調用函數, [延遲的毫秒數]);

setTimeout()方法用于設定一個定時器，該定時器在定時器到期後執行調用函數

注意：

1. window可以省略
2. 這個調用函數可以直接寫函數，或者寫函數名或者采取字元串，**‘函數名（）’**三種形式，第三種不推薦。
3. 延遲毫秒數省略預設是0，如果寫，必須是毫秒
4. 因為定時器可能有很多，是以我們經常給定時器指派一個标志符

setTimeout(function(){
        console.log('時間到了');
    },2000);

    function cal() {
        console.log('時間真的到了');
    }
    // 提倡
    setTimeout(cal,3000);
    // 不提倡
    setTimeout('cal()',3000);
    // 4、頁面中可能有很多的定時器，我們經常給定時器加标志服
    var time1 = setTimeout(cal,3000);
    var time2 = setTimeout(cal,5000);
           

回調函數

setTimeout()這個調用函數我們也稱為回調函數callback

普通函數是按照代碼順序直接調用。

而這個函數，需要等待時間，時間到了才去調用這個函數，是以稱為回調函數。

簡單了解：回調，就是回頭調用的意思。上一件事幹完，再回頭調用這個函數

以前我們講的element.onclick = function(){} 或者 element.addEventList(‘click’,fn); 裡面的函數也是回調函數

3.3 停止定時器

window.clearTimeout(timeoutID)

clearTimeout()方法取消了先前通過調用setTimeout()建立的定時器

注意：

1. window可以省略
2. 裡面的參數就是定時器的标志符

var btn = document.querySelector('button');
    var time = setTimeout(function() {
        console.log('爆炸了');
    },5000)

    btn.addEventListener('click',function(){
        clearTimeout(time);
    });
           

3.4 setInerval()定時器

window.setInterval(回調函數, [間隔的毫秒數]);

setInterval() 方法重複調用一個函數，每隔一段時間，就去調用一次這個回調函數

注意：

1. window可以省略
2. 這個調用函數可以直接寫函數，或者寫函數名或者采取字元串，**‘函數名（）’**三種形式，第三種不推薦。
3. 延遲毫秒數省略預設是0，如果寫，必須是毫秒，表示每隔多少毫秒就自動調用這個函數。
4. 因為定時器可能有很多，是以我們經常給定時器指派一個标志符

差別

• setTimeout 延時時間到了，就去調用這個回調函數隻調用一次就結束這個定時器
• setInterval 每隔這個延時時間，就去調用這個回調函數

3.5 停止setInterval()定時器

window.clearInterval(intervalID);

clearInterval()方法取消了先前通過調用setInterval建立的定時器

注意：

• window可以省略
• 裡面的參數就是定時器的辨別符

1. this

• 全局作用域或者普通函數中this指向全局對象window（注意定時器裡面的this指向window）
• 方法調用中誰調用this指向誰
• 構造函數中this指向構造函數執行個體

4. js執行機制

4.1 js是單線程

JavaScript語言的一大特點就是單線程，也就是說，同一時間隻能做一件事。這個因為JavaScript這門腳本語言誕生的使命所緻–JavaScript是為了處理頁面中使用者的互動，以及操作DOM頁面而誕生的，比如我們對某個DOM元素進行添加和删除操作，不能同時進行，應該先添加，之後再删除。

單線程就意味着所有的任務需要排隊，前一個任務結束，才執行後一個任務，這樣導緻的問題是：如果js執行的時間過長，這樣就會造成頁面的渲染不連貫，導緻頁面渲染加載阻塞的感覺。

4.2 同步跟異步

為了解決這個問題，利用多核CPU的計算能力，HTML5提出Web Worker标準，允許JavaScript腳本建立多個線程，于是，js中出現了同步跟異步

同步

前一個任務結束後再執行後一個任務，程式的執行順序與任務的排列順序是一緻的、同步的。比如做飯的同步做法：我們要燒水煮飯，等水開了（10分鐘之後），再去切菜，炒菜。

異步

你在做一件事時，因為這件事會花費很長時間，在做這件事的同時，你還可以去處理其他事情，比如做飯的異步做法，我們在燒水的同時，利用這10分鐘，去切菜、炒菜、

本質差別是：這條流水線上各個流程的執行順序不同

同步任務跟異步任務

同步任務

同步任務都在主線程上執行，形成一個執行棧

異步任務

js的異步任務是通過回調函數實作的

一般而言，異步任務有以下三種類型

1. 普通事件，如click、resize等
2. 資源加載，如load、error等
3. 定時器，包括setInterval、setTimeout等

異步任務相關回調函數添加到任務隊列中（任務隊列也稱消息隊列）

4.3 js的執行機制

1. 先執行執行棧中的同步任務
2. 異步任務（回調函數）放入任務隊列中
3. 一旦執行棧中所有同步任務執行完畢，系統就會按次序讀取任務隊列中的異步任務，于是被讀取的異步任務結束等待狀态，進入執行棧，開始執行

事件循環

由于主線程不斷的重複獲得任務、執行任務、再擷取任務、再執行，是以這種機制稱為事件循環（event loop）

5. location對象

5.1 什麼是location對象

window對象給我們提供了一個location屬性用于擷取或設定窗體的URL，并且可以用于解析URL。因為這個屬性傳回的是一個對象，是以我們将這個屬性稱為location對象。

5.2 URL

**統一資源定位符(Uniform Resource Locator,URL)**是網際網路上标準資源的位址，網際網路上的每個檔案都有一個唯一的URL，它包含的資訊指出檔案的位置以及浏覽器應該怎麼處理它

URL的一般文法為：

5.3 location對象的屬性

重點記住：href和search

5.4 location對象方法

var btn = document.querySelector('button');
    btn.addEventListener('click',function(){
        //記錄浏覽曆史 可以使用後退功能
        location.assign('http://baidu.com');

        //不記錄浏覽曆史 不可以使用後退功能
        location.replace('http://baidu.com');
        //重新加載頁面，相當于重新整理
        location.reload(true);
    })
           

6. navigator

navigator對象包含有關浏覽器的資訊，它有很多屬性，我們最常用的是userAgent，該屬性可以傳回由用戶端發送伺服器的user-agent頭部的值

下列前端的代碼可以判斷使用者哪個終端打開頁面，實作跳轉

7. history對象

window對象給我們問提供了一個history對象，與浏覽器曆史記錄進行互動，該對象包含使用者（在浏覽器中）通路過的URL

history.forward();
history.go(1);  //前進一步
history.go(-1);  //後退一步