重學JavaScript之window對象

歡迎關注 前端公衆號【小夭同窗】

ECMAScript是JavaScript的核心，但若是要在web中使用JavaScript，那麼BOM則是真正的核心，BOM提供了不少對象，用於訪問瀏覽器的功能，這些功能與任何網頁內容無關。

1. window對象

BOM的核心對象是window，它表示瀏覽器的一個實例。在瀏覽器中，window對象有雙重角色，它既是經過JS訪問瀏覽器窗口的一個接口，又是ES規定的Global對象。這意味着在網頁中定義的任何一個對象、變量和函數，都以window做爲其Global對象，所以有權訪問 parseInt（）等方法，

1.1 全局做用域

因爲 window對象同時扮演着ES中的Global對象的角色，所以全部在全局做用域中聲明的變量，函數都會變成window對象的屬性和方法。

var age = 29
function sayAge() {
    console.log(this.age)
}
console.log(window.age) // 29
sayAge()    // 29
window.sayAge() // 29
複製代碼

敲重點：window Mobile 平臺的 IE瀏覽器不容許經過 window.property = value 之類的形式，直接在 window 對象上建立新的屬性或方法，但是，在全局做用域中聲明的全部變量和函數，照樣會變成 window對象的成員。

1.2 窗口關係及框架

若是頁面中包含框架，則每一個框架都擁有本身的window對象，而且保存在 frames 集合中。在 frames集合中，能夠經過數值索引或者框架名稱來訪問相應的window對象，每一個window對象都有一個name屬性，其中包含框架的名稱。

敲重點：在使用框架的狀況下，瀏覽器中會存在多個Global對象。在每一個框架中定義的全局變量會自動成爲框架中 window 對象的屬性，因爲每一個window對象都包含原生類型的構造函數，所以每一個框架都有一套本身的構造函數，這些構造函數一一對應，但並不相等。

1.3 窗口位置

用來肯定和修改 window 對象位置的屬性和方法不少。IE、Chrome都提供了 screenLeft 和 screenTop屬性，分別用於表示窗口相對於屏幕左邊和上邊的位置。

敲重點：獲取位置的方法在每一個瀏覽器中獲取的值也並不同，須要針對特定的瀏覽器作特定的判斷。

1.4 窗口的大小

每一個不一樣的瀏覽器都提供了 innerWidth、innerHeight、outerWidth和outerHeight。可是在不一樣的瀏覽器中，它們獲取的值邊界也是不同的。

1.5 導航和打開窗口

咱們能夠經過 window.open() 打開一個特定的URL，也能夠打開一個新的瀏覽器窗口。這個方法能夠接受四個參數：須要加載的URL、窗口目標、特性字符串和一個表示新頁面是否取代瀏覽器歷史記錄中當前加載頁面的布爾值。一般只須要一個URL參數便可。

1.6 間歇調用和超時調用

由於 JS是單線程語言，但它容許經過設置超時值和間歇時間值來調度代碼在特定的時刻執行。前者是在指定的時間後執行代碼，然後者則是每一個指定的時間執行一次代碼。方法以下

setTimeout('方法名','延遲執行時間')
複製代碼

敲重點： 調用setTimeout以後，該方法會返回一個數值ID，表示超時調用。這個ID就是這個延遲執行的惟一標識符，能夠經過它來取消超時調用。

clearTimeout(timeoutId)
複製代碼

超時調用的代碼都是在全局做用域中執行的，所以函數中this的值一般會指向window對象。

setInterval('方法名','間個時間')

clearInterval(intervalId)
複製代碼

2. location對象

location 是最有用的BOM對象之一，它提供了與當前窗口中加載的文檔有關的信息，還提供了一些導航功能。經常使用的就是用來打開新頁面等。 參數以下：

屬性名	說明
hash	返回URL中的hash #在後面，若是URL中沒有則返回空字符串
host	返回服務器端口號
hostname	返回不帶端口號的服務器名稱
herf	返回當前頁面的URL
pathname	返回URL中的目錄或文件
port	返回URL中指定的端口號
protocol	返回頁面使用的協議
search	返回URL的查詢字符串

2.1 查詢字符串參數

經過 location.search 能夠查詢URL中包含的參數，根據 & 符號來分割查詢字符串，並返回name-value格式的字符串數組。

2.2 位置操做

使用 location 對象能夠經過不少方式來改變瀏覽器的位置。使用 assign() 方法併爲其傳遞一個URL ,這樣就能夠當即打開新的URL並在瀏覽器的歷史記錄中生成一條記錄

3. history 對象

保存着用戶上網的歷史記錄，從窗口被打開的那一刻算起。由於history是window對象的屬性，所以每一個瀏覽器窗口、每一個標籤乃至每一個框架，都有本身的history對象與特定的window對象關聯。

3.1 go()

能夠在用戶的歷史記錄中任意跳轉。能夠向前或向後。接受一個參數，表示向後或向前跳轉的頁面數的一個整數值。負數表示向後跳轉，正數表示向前跳轉。

3.2 back()

能夠模仿瀏覽器的後退操做

3.3 forward()

模仿瀏覽器的前進按鈕

四、小結

瀏覽器對象模型（BOM）以window對象爲依託，表示瀏覽器窗口以及頁面可見區域。同時，window對象仍是ES中的Global對象，於是全部全局變量和函數都是它的屬性，且全部原生的構造函數及其餘函數也都存在於它的命名空間下。

在使用框架時，每一個框架都有本身的window對象以及全部原生構造函數及其餘函數的副本。每一個框架都保存在frames集合中，能夠經過位置或名稱來訪問。

1. 有一些窗口指針，能夠用來引用其餘框架，包括父框架
2. top對象始終指向最外圍的框架，也就是整個瀏覽器窗口
3. parent 對象表示包含當前框架的框架，而self對象則回指window
4. 使用location對象能夠經過編程方式來訪問瀏覽器的導航系統。設置相應的屬性， 能夠琢段或總體性地修改瀏覽器的URL
5. 調用 replace() 方法能夠導航到一個新URL，同時該URL會替換瀏覽器歷史記錄中當前顯示的頁面
6. navigator 對象提供了與瀏覽器有關的信息。具體取決於用戶的瀏覽器。
7. BOM還有兩個對象：screen 和 history。screen 對象保存着與客戶端顯示器相關的信息。history對象訪問瀏覽器的歷史記錄。能夠在歷史記錄中向後或向前導航到任意頁面。

重學js系列

重學js之JavaScript簡介

重學 JS 之在 HTML 中使用 JavaScript

重學js之JavaScript基本概念（上）=> 數據類型

重學js之JavaScript基本概念（中）=> 操做符

重學js之JavaScript基本概念（下）=> 運算符

重學js之JavaScript變量、做用域和內存問題

重學js之JavaScript引用類型

重學js之JavaScript 面向對象的程序設計（建立對象）

重學JavaScript之面向對象的程序設計 => 繼承

重學JavaScript之匿名函數

ES6入門系列

ES6入門之let、cont

ES6入門之變量的解構賦值

ES6入門之字符串的擴展

ES6入門之正則的擴展

ES6入門之數值的擴展

ES6入門之函數的擴展

ES6入門之數組的擴展

ES6入門之對象的擴展

ES6入門之Symbol

ES6入門之Set 和 Map

Es6入門之proxy

ES6入門之Promise對象

Git教程

前端Git基礎教程

Python玩轉微信

Python 實現微信自動經過好友添加請求！！！

Python + Wxpy 實現微信防撤回。

Python獲取好友地區分佈及好友性別分佈