重学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集合中，可以通过位置或名称来访问。

有一些窗口指针，可以用来引用其他框架，包括父框架
top对象始终指向最外围的框架，也就是整个浏览器窗口
parent 对象表示包含当前框架的框架，而self对象则回指window
使用location对象可以通过编程方式来访问浏览器的导航系统。设置相应的属性，可以琢段或整体性地修改浏览器的URL
调用 replace() 方法可以导航到一个新URL，同时该URL会替换浏览器历史记录中当前显示的页面
navigator 对象提供了与浏览器有关的信息。具体取决于用户的浏览器。
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入门系列