JavaScript中window物件的成員屬性（總結分享）

這篇文章為大家帶來了關於javascript的相關知識，其中主要介紹了window對象的成員屬性相關問題，window 對象，是JS 的最頂層對象，其他的BOM 對像都是window 物件的屬性，下面一起來看一下，希望對大家有幫助。

【相關推薦：javascript影片教學、web前端】

##一、BOM的概念

1.1 什麼是BOM?

#BOM：Browser Object Model 是瀏覽器物件模型，BOM由多個物件構成，其中代表瀏覽器視窗的window物件是BOM的頂層物件也是核心對象，其他物件都是該物件的子物件。

1.2 BOM包含哪些內容？

瀏覽器介紹

BOM物件包含

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

(2)document 對象，文件對象；

(3)location 對象，瀏覽器目前URL資訊；

(4)navigator 對象，瀏覽器本身資訊；

(5)screen 對象，客戶端螢幕資訊；

(6)history 對象，瀏覽器存取歷史資訊；

在瀏覽器中，window對像有雙重角色，它既是透過javascript存取瀏覽器視窗的一個接口，也是ECMAScript規定的Global物件。

所有 JavaScript 全域物件、函數、變數均自動成為 window 物件的成員。

全域變數是 window 物件的屬性。

全域函數是 window 物件的方法。

1.3 BOM和DOM的關係

(1)DOM透過document物件來存取、控制、修改html和xhtml等文件中的內容

(2)BOM透過window 物件來存取、控制、修改瀏覽器中的內容

##聯繫：BOM包含DOM。區別：DOM描述了處理網頁內容的方法和接口，即操作頁面內部

BOM描述了與瀏覽器進行交互的方法和接口，即操作頁面之間

二、window物件

所有瀏覽器都支援window 物件。表示瀏覽器視窗。

所有 JavaScript 全域物件、函數、變數均自動成為 window 物件的成員。

全域變數是 window 物件的屬性。

全域函數是 window 物件的方法。

2.1 window物件因為window物件是js中的頂層對象，因此所有定義在全域作用域中的變數、函數都會變成window物件的屬性和方法，在呼叫的時候可以省略window。

例如：

開啟視窗window.open(url); 【等價於open(url);】

#關閉視窗window.close(); 【等價於close();】

取得事件window.event 【等價於event;】

#取得文件window.document 【等價於document】

#2.2 window物件中常用的屬性

#2.2.1 window.name

屬性：

window.name是window物件的屬性，預設值為空。

特性：

window.name值在不同的頁面（甚至不同網域）載入後依舊存在,

並且可以支援非常長的name值（2MB左右）

2.2.2瀏覽器距離螢幕的距離

window.screenX

window.screenY

2.2.3 window尺寸屬性

outerHeight屬性設定或傳回一個視窗的外部高度，包括所有介面元素（如工具列/捲軸）。

outerWidth屬性設定或傳回視窗的外部寬度，包括所有的介面元素（如工具列/捲軸）。

innerheight 傳回視窗的文件顯示區的高度。

innerwidth 傳回視窗的文件顯示區的寬度。

2.2.4 document物件

2.2.4 window.navigator物件

#

window.navigator物件包含大量有關網頁瀏覽器的信息，在偵測瀏覽器及作業系統上非常有用。 （這個物件和event一樣是一個全域變量，而且是唯一的）

navigator.appCodeName //瀏覽器程式碼名稱的字串表示

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

navigator.appVersion //瀏覽器版本資訊的字串表示

navigator.userAgent //傳回和瀏覽器核心相關的資訊

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

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

navigator.platform //瀏覽器所在電腦平台的字串表示

navigator.plugins //安裝在瀏覽器中的插件陣列

ps:如果window.navigator.userAgent出現了Mobile，可以確定使用者使用的是行動裝置。

2.2.5 Location 物件

• location.hostname 傳回web 主機的網域名稱

• #location.pathname 傳回目前頁面的路徑與檔名

• #location.port 傳回web 主機的連接埠（80 或443）

• #location.protocol 傳回所使用的web 協定（http: 或https:）

#search 屬性是可讀可寫的字串，可設定或傳回目前URL 的查詢部分（問號? 之後的部分）

#2.2.6 screen物件

#2.3 window物件中常用的方法

#2.4實例：三級連動選單

三、提示框

#3.1警告框

3.2 輸入框

prompt(alertMsg,defaultMsg);

表警告框，作用是提示使用者訊息，此方法執行後根據情況不同返回值略有不同。

a)點選取消,傳回值為null

b)沒有預設值

如果使用者沒有輸入內容，則傳回一個空字串

#如果使用者輸入了內容，返回值為使用者輸入的內容

c)有預設值

如果使用者沒有輸入內容，則傳回預設值

如果使用者修改了默認，傳回值為使用者輸入的內容

3.3 確認方塊

3.4 實例：自訂右鍵選單

############# ##########3.5 實例：放大鏡效果######################

#四、間隔呼叫與延遲呼叫

##4.1 定時器

• setInterval(表達式，毫秒數)

語法：var timer = null;

• # timer = setInterval(需要執行的函數，執行間隔時間ms)；

例如：

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

  總結說明：

##要把定時器下邊的任務執行完畢後才會去執行定時器的內容

定時執行中this指向window
每建立一個定時器就會有一個唯一的id被回傳id從開始之後累加

#清除定時器時不僅可以使用變數也可以使用唯一Id清除

當定時執行的函數是包含參數時則應該將函數和參數使用引號包起來

先明確兩點：

1.JS 執行機制是單執行緒。

2.JS的Event loop是JS的執行機制

依照這種的分類方式JS的執行機制是：

非同步的程式設計思想：

首先，判斷JS是同步還是異步，同步進入主線程，異步進入Event table

其次，異步任務在Event table中註冊函數，當滿足特定的條件，被推入Event queue（訊息佇列）最後，同步任務進入主執行緒後一直執行，直到主執行緒空閒後，才會去Event queue中查看是否有可執行的非同步任務，如果有就推入主執行緒中執行。

清除間隔呼叫

既然間隔呼叫每隔一段時間就會自動執行一次，那麼清除間隔呼叫就會勢必存在。

語法：clearInterval(變數識別)

例如：clearInterval(timer);

上述程式碼就能夠將剛剛建立的計時器移除掉，令其不在間隔一段時間後自動再次執行。

注意：

(1)間隔呼叫的回傳值是一個數字佇列，因此透過存取數字佇列來清除間隔呼叫也被允許。

注意：

(2) 如果間隔呼叫的函數需要傳入參數，則間隔呼叫需要使用如下的方式宣告

#語法：var timer = null;timer = setInterval(字串,執行間隔事件ms)；

例如

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

(3) 間隔呼叫不是立即執行，而是在【任務佇列中的任務完成後】才執行間隔呼叫

(4) 因為間隔呼叫函數的實際執行者是window，因此間隔呼叫內部的this指向window

4.2 延時器

延遲呼叫又叫延遲呼叫函數。是一種能夠等待一定時間後在執行的函數。

語法：var timer = null;

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

例如：

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

根據語法所述，上述程式碼所表示的意思為：等待2s後列印一句【hello world！ 】

注意：延遲呼叫除了在語法上和間隔呼叫略有不同外，其餘語法均相同。

(1)閱讀下列程式碼，口算列印結果

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

(2)閱讀下列程式碼，口算列印結果

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

4.4實例：時間走動

4.5 實例：倒數計時

############### ######4.6 實例：進度列的載入############

【相關推薦：javascript影片教學、web前端】

#

以上是JavaScript中window物件的成員屬性（總結分享）的詳細內容。更多資訊請關注PHP中文網其他相關文章！