window对象 | Billy and Barney's Blog

window对象是全局对象，里面有很多可以用于前端交互的属性，下面将一一介绍。

1. screen 对象

screen对象可以获取到用户的屏幕信息，主要有以下四个通用属性，其他属性不同的浏览器支持度不同，所以就不作介绍了。

获取屏幕的宽高，screen.width && screen.height、widnow.screen.width && window.screen.height。
获取屏幕的可用宽高，screen.availWidth && screen.availHeight、widnow.screen.availWidth && window.screen.availHeight。

2. location 对象

属性：

属性	描述
href	设置或返回完整的URL
hash	设置或返回从井号 (#) 开始的 URL（锚）。
host	设置或返回主机名和当前 URL 的端口号。
hostname	设置或返回当前 URL 的主机名。
pathname	设置或返回当前URL的路径部分
port	设置或返回当前URL的端口号
protocol	设置或返回当前URL的协议
search	设置或返回从问好（？）开始的URL，及查询部分

方法：
| 方法 | 描述 |
| ——– | ——————————————- |
| assign(url) | 加载新的文档 |
| reload(bool) | 重新加载当前文档 |
| replace(url) | 用新的文档替换当前文档（* 不会有history记录） |

3. History 对象

History 对象最初设计来表示窗口的浏览历史。但出于隐私方面的原因，History 对象不再允许脚本访问已经访问过的实际 URL。唯一保持使用的功能只有 back()、forward() 和 go() 方法。history又一个length属性表示浏览器历史列表中浏览记录的数量。

方法：

方法	描述
back(numer = 1)	加载指向history中当前URL前number个URL
forward(number = 1)	加载指向history中当前URL后number个URL
go(url)	前往history中的某个具体页面

4. Navigator 对象

Navigator 对象包含的属性描述了正在使用的浏览器。可以使用这些属性进行平台专用的配置。Navigator 对象的实例是唯一的，可以用 Window 对象的 navigator 属性来引用它。不过一般不太常用，因为在http请求中，一般也都会有关于浏览器的常用属性。

具体属性见w3C: https://www.w3school.com.cn/jsref/dom_obj_navigator.asp

5. 其他常用的window属性与方法

属性：

属性	描述
innerHeight、innerWidth	get文档显示区域的宽度和高度
pageXOffset、pageYOffset	set \|\| get 页面相对窗口显示区域的x、y方向的位置

方法：

方法	描述
setTimeout、clearTomeout	在指定时间后加入事件队列
setInterval、clearInterval	按照指定的时间，周期性的将内部的方法加入事件队列
scrollTo	将内容滚动到指定的坐标

其实window对象整体的知识点是简单的，关键是如何使用。比如常见的回退定位就是通过在前后两个页面中，通过url中的query信息传递的位置浏览页面的位置信息。而当用户回到浏览页面时，浏览页会从url中拿到上一次进入页面的时候，已经浏览到的位置。然后将页面滚动到用户已经浏览到的位置。这样就可以实现回退定位的操作，提升用户体验。

还比如，setTimeout其实是可以替代setInterval，而且有的时候，setTimeout代替setInterval的效果要比它本身更好。因为setInterval只是周期性向事件队列添加事件。但如果事件队列中已经有了这个setInterval要添加的事件，那么setInterval就不会再添加事件到事件队列里了。如果遇到复杂的计算并且周期又很短，就可能导致失帧。也就是说，有一些步骤的是不会加入到事件队列，从而丢失的。具体可以参考以这篇文章：https://juejin.im/post/5dac26206fb9a04dea5df84f

再比如，innerHeight和innerWidth可以让我们根据可以展示的区域的大小做一定的适配，规定一些基础宽度大小，比如html的font-size的大小，从而达到响应式的效果。

下周计划，看完了you don’t know JavaScript yet的作用域这一块，所以下个周的内容应该是重点整理这个知识点。