JavaScript中window對(duì)象的成員屬性實(shí)例分析

這篇文章主要介紹“JavaScript中window對(duì)象的成員屬性實(shí)例分析”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“JavaScript中window對(duì)象的成員屬性實(shí)例分析”文章能幫助大家解決問(wèn)題。

一、BOM的概念

1.1 什么是BOM?

BOM：Browser Object Model 是瀏覽器對(duì)象模型，BOM由多個(gè)對(duì)象構(gòu)成，其中代表瀏覽器窗口的window對(duì)象是BOM的頂層對(duì)象也是核心對(duì)象，其他對(duì)象都是該對(duì)象的子對(duì)象。

1.2 BOM包含哪些內(nèi)容？

瀏覽器介紹

BOM對(duì)象包含

(1)window 對(duì)象，是 JS 的最頂層對(duì)象，其他的 BOM 對(duì)象都是 window 對(duì)象的屬性。

(2)document 對(duì)象，文檔對(duì)象；

(3)location 對(duì)象，瀏覽器當(dāng)前URL信息；

(4)navigator 對(duì)象，瀏覽器本身信息；

(5)screen 對(duì)象，客戶端屏幕信息；

(6)history 對(duì)象，瀏覽器訪問(wèn)歷史信息；

在瀏覽器中，window對(duì)象有雙重角色，它既是通過(guò)javascript訪問(wèn)瀏覽器窗口的一個(gè)接口，又是ECMAScript規(guī)定的Global對(duì)象。

所有 JavaScript 全局對(duì)象、函數(shù)以及變量均自動(dòng)成為 window 對(duì)象的成員。

全局變量是 window 對(duì)象的屬性。

全局函數(shù)是 window 對(duì)象的方法。

1.3 BOM和DOM的關(guān)系

(1)DOM通過(guò)document對(duì)象來(lái)訪問(wèn)、控制、修改html和xhtml等文檔中的內(nèi)容

(2)BOM通過(guò) window 對(duì)象來(lái)訪問(wèn)、控制、修改瀏覽器中的內(nèi)容

聯(lián)系：BOM包含DOM。區(qū)別：DOM描述了處理網(wǎng)頁(yè)內(nèi)容的方法和接口，即操作頁(yè)面內(nèi)部

BOM描述了與瀏覽器進(jìn)行交互的方法和接口，即操作頁(yè)面之間

二、window對(duì)象

所有瀏覽器都支持 window 對(duì)象。表示瀏覽器窗口。

所有 JavaScript 全局對(duì)象、函數(shù)以及變量均自動(dòng)成為 window 對(duì)象的成員。

全局變量是 window 對(duì)象的屬性。

全局函數(shù)是 window 對(duì)象的方法。

2.1 window對(duì)象

因?yàn)閣indow對(duì)象是js中的頂級(jí)對(duì)象，因此所有定義在全局作用域中的變量、函數(shù)都會(huì)變成window對(duì)象的屬性和方法，在調(diào)用的時(shí)候可以省略window。

例如：

打開(kāi)窗口 window.open(url); 【等價(jià)于open(url);】

關(guān)閉窗口 window.close(); 【等價(jià)于close();】

獲取事件 window.event 【等價(jià)于event;】

獲取文檔 window.document 【等價(jià)于document】

2.2 window對(duì)象中常用的屬性

2.2.1 window.name

屬性：

window.name是window對(duì)象的一個(gè)屬性，默認(rèn)值為空。

特性：

window.name值在不同的頁(yè)面（甚至不同域名）加載后依舊存在,

并且可以支持非常長(zhǎng)的name值（2MB左右）

2.2.2瀏覽器距離屏幕的距離

window.screenX

window.screenY

2.2.3 window尺寸屬性

outerHeight屬性設(shè)置或返回一個(gè)窗口的外部高度，包括所有界面元素（如工具欄/滾動(dòng)條）。

outerWidth屬性設(shè)置或返回窗口的外部寬度，包括所有的界面元素（如工具欄/滾動(dòng)條）。

innerheight 返回窗口的文檔顯示區(qū)的高度。

innerwidth 返回窗口的文檔顯示區(qū)的寬度。

2.2.4 document對(duì)象

2.2.4 window.navigator對(duì)象

window.navigator對(duì)象包含大量有關(guān)Web瀏覽器的信息，在檢測(cè)瀏覽器及操作系統(tǒng)上非常有用。（這個(gè)對(duì)象和event一樣是一個(gè)全局變量，并且是唯一的）

navigator.appCodeName //瀏覽器代碼名的字符串表示

navigator.appName //官方瀏覽器名的字符串表示

navigator.appVersion //瀏覽器版本信息的字符串表示

navigator.userAgent //返回和瀏覽器內(nèi)核相關(guān)的信息

navigator.cookieEnabled //如果啟用cookie返回true，否則返回false

navigator.javaEnabled() //如果啟用java返回true，否則返回false

navigator.platform //瀏覽器所在計(jì)算機(jī)平臺(tái)的字符串表示

navigator.plugins //安裝在瀏覽器中的插件數(shù)組

ps:如果window.navigator.userAgent出現(xiàn)了Mobile，可以確定用戶使用的是移動(dòng)設(shè)備。

2.2.5 Location 對(duì)象

• location.hostname 返回 web 主機(jī)的域名

• location.pathname 返回當(dāng)前頁(yè)面的路徑和文件名

• location.port 返回 web 主機(jī)的端口 （80 或 443）

• location.protocol 返回所使用的 web 協(xié)議（http: 或 https:）

search 屬性是一個(gè)可讀可寫的字符串，可設(shè)置或返回當(dāng)前 URL 的查詢部分（問(wèn)號(hào) ? 之后的部分）

2.2.6 screen對(duì)象

2.3 window對(duì)象中常用的方法

2.4實(shí)例：三級(jí)聯(lián)動(dòng)菜單

三、提示框

3.1警告框

3.2 輸入框

prompt(alertMsg,defaultMsg);

表警示框，作用是提示用戶信息，該方法執(zhí)行后根據(jù)情況不同返回值略有不同。

a)點(diǎn)擊取消,返回值為null

b)沒(méi)有默認(rèn)值

如果用戶沒(méi)有輸入內(nèi)容，返回一個(gè)空字符串

如果用戶輸入了內(nèi)容，返回值為用戶輸入的內(nèi)容

c)有默認(rèn)值

如果用戶沒(méi)有輸入內(nèi)容，返回默認(rèn)值

如果用戶修改了默認(rèn)，返回值為用戶輸入的內(nèi)容

3.3 確認(rèn)框

3.4 實(shí)例：自定義右鍵菜單

3.5 實(shí)例：放大鏡效果

四、間隔調(diào)用和延遲調(diào)用

4.1 定時(shí)器

setInterval(表達(dá)式，毫秒數(shù))

語(yǔ)法：var timer = null；

timer = setInterval(需要執(zhí)行的函數(shù)，執(zhí)行間隔時(shí)間ms)；

例如：

var timer = null；
timer = setInterval(function(){
console.log('hello world!');
},2000);

總結(jié)說(shuō)明：

• 要把定時(shí)器下邊的任務(wù)執(zhí)行完畢后 才會(huì)去執(zhí)行定時(shí)器的內(nèi)容

• 定時(shí)執(zhí)行中this指向window

• 每創(chuàng)建一個(gè)定時(shí)器 就會(huì)有一個(gè)唯一的id被返回 id從開(kāi)始 之后累加

• 清除定時(shí)器時(shí) 不僅可以使用變量 也可以使用唯一Id清除

• 當(dāng)定時(shí)執(zhí)行的函數(shù)是包含參數(shù)時(shí) 則應(yīng)該 將函數(shù)和參數(shù) 使用引號(hào)包裹起來(lái)

首先明確兩點(diǎn)：

1.JS 執(zhí)行機(jī)制是單線程。

2.JS的Event loop是JS的執(zhí)行機(jī)制

按照這種的分類方式JS的執(zhí)行機(jī)制是：

異步的編程思想：

首先，判斷JS是同步還是異步，同步進(jìn)入主線程，異步進(jìn)入Event table

其次，異步任務(wù)在Event table中注冊(cè)函數(shù)，當(dāng)滿足特定的條件，被推入Event queue（消息隊(duì)列）最后，同步任務(wù)進(jìn)入主線程后一直執(zhí)行，直到主線程空閑后，才會(huì)去Event queue中查看是否有可執(zhí)行的異步任務(wù)，如果有就推入主線程中執(zhí)行。

清除間隔調(diào)用

既然間隔調(diào)用每隔一段時(shí)間就會(huì)自動(dòng)執(zhí)行一次，那么清除間隔調(diào)用就勢(shì)必存在。

語(yǔ)法：clearInterval(變量標(biāo)識(shí))

例如：clearInterval(timer);

上述代碼就能夠?qū)倓倓?chuàng)建的定時(shí)器移除掉，令其不在間隔一段時(shí)間后自動(dòng)再次執(zhí)行。

注意：

(1)間隔調(diào)用的返回值是一個(gè)數(shù)字隊(duì)列，因此通過(guò)訪問(wèn)數(shù)字隊(duì)列來(lái)清除間隔調(diào)用也被允許。

注意：

(2) 如果間隔調(diào)用的函數(shù)需要傳入?yún)?shù)，則間隔調(diào)用需要使用如下的方式聲明

語(yǔ)法：var timer = null;

timer = setInterval(字符串,執(zhí)行間隔事件ms)；

例如

var timer = null;
function show(words){console.log(words);}
timer = setInterval('show("hello world!")',2000);

(3) 間隔調(diào)用不是立即執(zhí)行，而是在【任務(wù)隊(duì)列中的任務(wù)完成后】才執(zhí)行間隔調(diào)用

(4) 因?yàn)殚g隔調(diào)用函數(shù)的實(shí)際執(zhí)行者是window，因此間隔調(diào)用內(nèi)部的this指向window

4.2 延時(shí)器

延遲調(diào)用又叫延遲調(diào)用函數(shù)。是一種能夠等待一定時(shí)間后在執(zhí)行的函數(shù)。

語(yǔ)法：var timer = null;

timer = setTimeout(需要執(zhí)行的函數(shù)，等待的時(shí)間);

例如：

var wait = null；
wait = setTimeout(function(){
console.log('hello world!');
},2000);

根據(jù)語(yǔ)法所述，上述代碼所表示的含義為：等待2s后打印一句【hello world！】

注意：延遲調(diào)用除了在語(yǔ)法上和間隔調(diào)用略有不同外，其余語(yǔ)法均相同。

(1)閱讀下列代碼，口算打印結(jié)果

setInterval(function () {console.log(1111);},0);setTimeout(function () {console.log(2222);},0);

(2)閱讀下列代碼，口算打印結(jié)果

var div = document.getElementsByTagName("div").item(0); div.onclick = function () { setTimeout(function () {console.log(this);}, 1000); };

4.4 實(shí)例：時(shí)間走動(dòng)

4.5 實(shí)例：倒計(jì)時(shí)

4.6 實(shí)例：進(jìn)度條的加載

關(guān)于“JavaScript中window對(duì)象的成員屬性實(shí)例分析”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。