重学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获取好友地区分布及好友性别分布